CSS линейный градиент с разделениями - PullRequest
Новая
       23

CSS линейный градиент с разделениями

1 голос
/ 20 апреля 2020

Мне нужно сделать динамический c компонент, выглядит так: enter image description here

Количество ячеек (8 на рисунке) является динамическим c (давайте назовем это X), поэтому мне нужно поддерживать каждое количество ячеек (я работаю с React).

Теперь, я думаю, у меня есть два варианта:

  1. Создать длинный промежуток с градиентом и, кроме того, создайте X-ячейки с белой рамкой, прозрачным фоном, абсолютной позицией - и ячейки будут «покрывать» градиент. Я уже вижу по крайней мере одну проблему - фон под градиентом не всегда может быть белым. Кроме того, я боюсь, что это потребует специальных выравниваний в мобильных или других браузерах.

  2. Создайте X ячеек с градиентом, каждая ячейка будет иметь начало и конец градиента в своей позиции. Но я не могу понять, как это сделать.

Какое решение лучше? Если решение 2 лучше, как это сделать?

1 Ответ

3 голосов
/ 20 апреля 2020

Вы можете сделать это, используя маску и один div: 

.box {
  height:200px;
  background:linear-gradient(to right,green,yellow);
  -webkit-mask: linear-gradient(to right,#fff calc(100% - 5px), transparent 0) 
                 0 / calc((100% + 5px)/8) 100%;
          mask: linear-gradient(to right,#fff calc(100% - 5px), transparent 0) 
                 0 / calc((100% + 5px)/8) 100%;
}

body {
  background:#e2e2e2;
  border:5px solid red;
}
<div class="box">

</div>

Вы можете добавить CSS переменных, чтобы легко настроить различные значения: 

.box {
  --n:8;
  --b:5px;

  height:100px;
  background:linear-gradient(to right,green,yellow);
  -webkit-mask: linear-gradient(to right,#fff calc(100% - var(--b)), transparent 0) 
                 0 / calc((100% + var(--b))/var(--n)) 100%;
          mask: linear-gradient(to right,#fff calc(100% - var(--b)), transparent 0) 
                 0 / calc((100% + var(--b))/var(--n)) 100%;
   margin:5px 0;
}

body {
  background:#e2e2e2;
  border:5px solid red;
}
<div class="box"></div>
<div class="box" style="--n:10;--b:10px;"></div>
<div class="box" style="--n:5;--b:15px;"></div>

Другой синтаксис: 

.box {
  --n:8;
  --b:5px;

  height:100px;
  background:linear-gradient(to right,green,yellow);
  -webkit-mask: repeating-linear-gradient(to right,
                  #fff        0 calc((100% + var(--b))/var(--n) - var(--b)), 
                  transparent 0 calc((100% + var(--b))/var(--n)));
                 
          mask: repeating-linear-gradient(to right,
                  #fff        0 calc((100% + var(--b))/var(--n) - var(--b)), 
                  transparent 0 calc((100% + var(--b))/var(--n)));
   margin:5px 0;
}

body {
  background:#e2e2e2;
  border:5px solid red;
}
<div class="box"></div>
<div class="box" style="--n:10;--b:10px;"></div>
<div class="box" style="--n:5;--b:15px;"></div>
...