在CSS中将渐变与重复线性渐变重叠（或者如果可能的话顺风）

Question

我能做什么：

在此输入图片描述

我想要什么：

在此输入图片描述

我想添加那些白线。无论元素大小如何，我都需要均匀分布其中的 25 个。

这是代码：

.div {
    height: 50px;
    background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 10px, white 10px, white 14px),
    linear-gradient(90deg,#ff5e6d,#ffd255,#92d6a5);
}

我尝试过在 CSS 中使用

calc()

函数，但无法使其工作。

Answer 1

尝试以下方法

.box {
  --b: 5px; /* width of the bar */
  --n: 10;  /* number of bars */
  
  height: 50px;
  width: 200px;
  border-radius: 50px;
  background: 
    linear-gradient(90deg,#fff var(--b),#0000 0)
    calc(-1*var(--b))/calc((100% + var(--b))/(var(--n) + 1)) 100%, 
    linear-gradient(90deg,#ff5e6d, #ffd255, #92d6a5);
}

<div class="box"></div>