时间戳

首页 > 解决方案 > 带分隔的 CSS 线性渐变

css - 带分隔的 CSS 线性渐变

问题描述

我需要制作动态组件，如下所示： 在此处输入图像描述

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

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

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

  2. 创建具有渐变的 X 单元格，每个单元格的渐变开始（和结束）位置不同。但我不知道该怎么做。

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

标签： csslinear-gradients

解决方案

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

推荐阅读