带分隔的 CSS 线性渐变答案

【问题标题】：CSS linear gradient with separations带分隔的 CSS 线性渐变
【发布时间】：2020-04-20 10:16:18
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： css linear-gradients

【解决方案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>

【讨论】：