Как реализовать такую задумку дизайнера?

Question

Есть навигация по квизу (опроснику), который имеет несколько шагов. По задумке дизайнера, в зависимости от того, какое состояние шагов (заполненный, пропущенный, по дефолту) линия имеет разную окраску на отдельных участках.

Очевидно, что здесь нужно использовать градиент, но каким образом такое можно реализовать?

Answer 1

Чтобы добиться прерывистой линии можно попробовать использовать border. То есть между круглыми элементами создаётся блок высотой 0 и длиной равной расстоянию между этими круглыми элементами. Этому элементу задать свойство border-top или border-bottom. А цвет указать linear-gradient

Answer 2

Основная идея:

div {
  height: 2px;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent,
      transparent 2px,
      white 2px,
      white 3px),
      
    linear-gradient(to right,
      red 10%,
      #2ff 30%,
      red 50%,
      black 70%,
      #2ff 90%
    );
}

<div></div>

Конечно придется хорошо так повозиться с процентами, цветами и их переключением из JS. И не факт, что такое решение будет легче, чем заполнение "в лоб" из JS, через массив цветов (или, хранить только основные цвета в RGB, а шаг - вычислять в цикле) в мелкие квадратики по 2px.

БЛОГ НА HUSL

Как реализовать такую задумку дизайнера?

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