Перекрытие полосками градиента с повторяющимся линейным градиентом в 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);
}

Я пробовал использовать функцию calc() в CSS, но не смог заставить ее работать.

_{Свободный перевод вопроса Overlapping a gradient with a repeating-linear-gradient in css от участника @Said.}

Answer 1

Попробуйте следующее:

 .box {
  --b: 5px; /* ширина полоски */
  --n: 10;  /* количество полос */
  
  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>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Перекрытие полосками градиента с повторяющимся линейным градиентом в css

Ответы (1 шт):