CSS 带分离的线性渐变

Question

我需要制作动态组件，如下所示：

单元格的数量（图片中的 8 个）是动态的（我们称之为 X）所以我需要支持每个单元格的数量（我使用 React）。

现在，我想我有两个选择：

创建带有渐变的长跨度，另外创建具有白色边框、透明背景、绝对位置的 X 单元格 - 这些单元格将 "cover" 渐变。我已经看到至少一个问题——渐变下的背景可能并不总是白色的。另外，恐怕它需要在移动设备或不同的浏览器上进行特殊对齐。
创建X个带有渐变的单元格，每个单元格的渐变开始（和结束）位置不同。但是我不知道该怎么做。

哪种解决方案更好？如果方案2更好，怎么做？

Answer 1

你可以使用掩码和一个 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>

CSS 带分离的线性渐变

CSS linear gradient with separations

css

linear-gradients