Как сверстать вот такую полоску?

Question

[Аристарх]

В общем мне нужно сверстать эту страничку и как бы всё просто, но вот саму "полоску" я не знаю как сделать.
Для наглядности я выделил её на скриншоте ниже

Может кто-нибудь знает как реализовать такую?
Вообще это страничка со всеми изменениями на сайте и информация будет туда добавляться как новости (грубо говоря)
Цвет желательно, чтобы был свой, указанный и чтобы он шёл по кругу
Пример: жёлтый > зелёный > синий > красный > жёлтый > зелёный > ...

Comments

[Андрей]

В формате SVG

[Аристарх]

Андрей, а можно по-подробнее пожалуйста, интересен сам принцип вёрстки
Просто сам не очень дружу с CSS, а особенно с SVG :)

[snap44]

Аристарх Ледецкий, подробнее не получится. Я раньше тоже недоумевал когда на подобные вопросы отвечали кратко "svg". Но по-другому и не ответишь. С одной стороны ничего сложного, с другой стороны целую технологию в двух словах не опишешь.

[Аристарх]

snap44, Просто не совсем понимаю как реализовать и хотелось бы немного примеров))

[snap44]

Аристарх, экспортируешь одну полоску из макета, позиционируешь, добавляешь градиент. Всё. Просто это не обычный блок с градиентом что бы так просто взять и накидать в кодпен. Нужен хотя бы макет, но даже с ним вряд ли кто-то захочет набросать готовое решение)

[Аристарх]

snap44, Оу, спасибо большое!

Answer 1

[profesor08]

Создаешь svg, в нем создаешь блок, заливаешь его градиентом, далее при помощи clipPath вырезаешь контур.
Создаешь svg, в нем создаешь контур, заливаешь градиентом.
Создаешь div, его заливаешь градиентом, далее при помощи clip-path вырезаешь контур.
Создаешь div, в нем создаешь еще несколько, равное количеству линий и углов, задаешь линиям градиент, выстраиваешь их позиционированием и поворотами в нужные позиции, на угла ставишь оставшиеся в форме кружочков с градиентом, чтоб гладить углы.
Создаешь canvas, рисуешь градиентную кривую любым нагугленным способом.
Создаешь png, растягиваешь его и не паришься.

Наверно можно еще с десяток способов придумать, как сделать такую линию.

Answer 2

[unkstd]

Ну это просто меню в стиле "карта метро". Думаю всё понятно будет и можно будет сделать как на картинке с градиентом, толстыми линиями, и т.д.
https://html5book.ru/vertikalnoe-menu/#part2