Подберите градиенты двух делителей, если они имеют разную ширину - PullRequest
Новая
       15

Подберите градиенты двух делителей, если они имеют разную ширину

0 голосов
/ 07 января 2019

У меня есть 10 встроенных div, которые имеют один и тот же тип градиента - линии 45 градусов, но градиенты имеют разные цвета, а div имеют разную ширину.

Можно ли подобрать градиент? (Надеюсь, что фото ниже объясняют это)

Мой CSS для градиента. Только цвет меняется. 

   #div1 {
     background: repeating-linear-gradient(
        45deg,
        rgba(155,155,155,0.8),
        rgba(155,155,155,0.8) 3px,
        rgba(250,250,250,0.4) 3px,
        rgba(250,250,250,0.4) 6px);
    }

    #div2 {
     background: repeating-linear-gradient(
        45deg,
        rgba(235,102,107,0.6),
        rgba(235,102,107,0.6) 3px,
        rgba(250,250,250,0.4) 3px,
        rgba(250,250,250,0.4) 6px);
    }
div {
  height:100px;
  display:inline-block;
}
<div id="div1" style="width: 30px"></div><div id="div2" style="width: 40px"></div>

Как это выглядит сейчас (строки не совпадают):

lines are not matching

Как я хочу, чтобы это выглядело:

lines are matching

Ответы [ 4 ]

0 голосов
/ 07 января 2019

Вы можете использовать оба градиента для одного и того же элемента и использовать трюк background-clip, чтобы скрыть часть первого, которая не пойдет до отступа, где вы увидите второй: 

.box {
  height:100px;
  width:80px;
  padding-right:50px;
  margin:5px;
  display:inline-block;
 background: 
 repeating-linear-gradient(
    45deg,
    rgba(235,102,107,0.6),
    rgba(235,102,107,0.6) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) content-box,
 linear-gradient(#fff,#fff) content-box, /*avoid the overlap of both gradient*/
 repeating-linear-gradient(
    45deg,
    rgba(155,155,155,0.8),
    rgba(155,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) padding-box;
}
<div class="box"></div>
<div class="box" style="width:100px;"></div>
<div class="box" style="padding-right:100px;"></div>

Если у вас более 2 градиентов, вы можете рассмотреть background-size. Хитрость заключается в том, чтобы под каждым белым фоновым слоем скрывался видимый градиент: 

.box {
  height:100px;
  width:300px;
  margin:5px;
  display:inline-block;
 background: 
 /*First gradient*/
 repeating-linear-gradient(
    45deg,
    rgba(235,102,107,0.6),
    rgba(235,102,107,0.6) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) left/30% 100%,
 linear-gradient(#fff,#fff) left/30% 100%,
 /*Second one*/
 repeating-linear-gradient(
    45deg,
    rgba(155,155,155,0.8),
    rgba(155,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) left/60% 100%,
 linear-gradient(#fff,#fff) left/60% 100%,
 /**/
 repeating-linear-gradient(
    45deg,
    rgba(15,15,15,0.8),
    rgba(15,15,15,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) left/80% 100%,
 linear-gradient(#fff,#fff) left/80% 100%,
 /**/
 repeating-linear-gradient(
    45deg,
    rgba(12,155,155,0.8),
    rgba(12,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px) left/100% 100%,
 linear-gradient(#fff,#fff) left/100% 100%;
  background-repeat:no-repeat;
}
<div class="box"></div>

Вот еще одна идея, которая полагается на mix-blend-mode для достижения того же результата с меньшим количеством кода: 

.box {
  height:100px;
  width:300px;
  position:relative;
  display:inline-block;
  background: 
  repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.6) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px),
    #fff;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,blue 20%,red 20%, red 40%,orange 40%);
  mix-blend-mode: lighten;
}
<div class="box"></div>

Вот еще одна идея, основанная на background-attachment:fixed, где вы также можете сохранить прозрачность: 

.box {
  height:100px;
  width:30px;
  margin:5px 0;
  display:inline-block;
 background-attachment:fixed;
}
#f1 {
 background-image:repeating-linear-gradient(
    45deg,
    rgba(155,155,155,0.8),
    rgba(155,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
}
#f2 {
 background-image:repeating-linear-gradient(
    45deg,
    rgba(15,15,15,0.8),
    rgba(15,15,15,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
}
#f3 {
 background-image:repeating-linear-gradient(
    45deg,
    rgba(12,155,155,0.8),
    rgba(12,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
 }
<div class="box" id="f1"></div><div class="box" id="f2" style="width:100px"></div><div class="box" id="f3" style="width:150px"></div>

Другой способ с несколькими фонами: 

.box {
  height:100px;
  width:300px;
  position:relative;
  display:inline-block;
  background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(250,250,250,1) 3px,
    rgba(250,250,250,1) 6px),
   linear-gradient(to right,
    rgba(235,102,107,0.6) 20%,
    rgba(155,155,155,0.8) 20%, rgba(155,155,155,0.8) 40%,
    rgba(15,15,15,0.8) 40%);
}
<div class="box"></div>
0 голосов
/ 07 января 2019

Я получил это: 

<div id="div1" style="width: 100px; height: 50px;"></div>


#div1 {
 background: repeating-linear-gradient(
    45deg,
    rgba(155,155,155,0.8),
    rgba(155,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
}

#div2 {
 background: repeating-linear-gradient(
    45deg,
    rgba(235,102,107,0.6),
    rgba(235,102,107,0.6) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
        background-position: -1px;
}
<div id="div1" style="width: 100px; height: 50px;"></div>
<div id="div2" style="width: 100px; height: 50px;"></div>

Я думаю, что фоновая позиция - это то, что вы ищете

0 голосов
/ 07 января 2019

Я думаю, что это бы сработало: сделайте свои деления твердыми и положите на них полосатый делитель. (вдохновлено Byoung730) 

div {height: 100px; display: inline-block;}

#div1 {
 background: repeating-linear-gradient(
    45deg,
    rgba(155,155,155,0.8),
    rgba(155,155,155,0.8) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
}

#div2 {
 background: repeating-linear-gradient(
    45deg,
    rgba(235,102,107,0.6),
    rgba(235,102,107,0.6) 3px,
    rgba(250,250,250,0.4) 3px,
    rgba(250,250,250,0.4) 6px);
}

#div3 {
 background:rgba(155,155,155,0.8)}
 
#div4 {
 background:rgba(235,102,107,0.6)}
 
#div5 {
  position: relative;
  top: -100px;
  width: 500px;
 background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,1),
    rgba(255,255,255,1) 3px,
    rgba(255,255,255,0) 3px,
    rgba(255,255,255,0) 6px);}
your example:<br>
<div id="div1" style="width: 100px"></div><div id="div2" style="width: 400px"></div>

smooth one:<br>
<div id="div3" style="width: 100px"></div><div id="div4" style="width: 400px"></div><div id="div5"></div>
0 голосов
/ 07 января 2019

Сделайте его одним div и используйте что-то вроде: 

    .book {
      background-image: linear-gradient(105deg,
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
      url(../img/nat-10.jpg);

Проценты, если они равны, вызывают немедленное изменение цвета, а не постепенное. Так что это идет прямо от моего белого цвета до прозрачного. Таким образом, использование одного div сохранит прямые линии, а проценты изменят цвета. У меня был наклон, так что вы захотите изменить начальный угол.

HTML: 

    <section class="section-book" id="book">
      <div class="row">
        <div class="book">
          <div class="book__form">
            <form action="#" class="form">
...