带分隔的CSS线性渐变

Question

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

单元数（图片中的8个）是动态的（我们称之为X），因此我需要支持每个单元数（我与React一起工作）。

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

1. 使用渐变创建一个大跨度，并另外创建带有白色边框，透明背景，绝对位置的X像元-像元将“覆盖”渐变。我已经看到至少一个问题-渐变下的背景可能并不总是白色。另外，恐怕它在移动设备或其他浏览器上也需要进行特殊调整。

2. 创建带有渐变的X单元格，每个单元格的渐变起点（和终点）将位于不同的位置。但是我不知道该怎么做。

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

Answer 1

您可以使用mask和一个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>