EnderStore
@EnderStore
Кодер-обыкновенный

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

В общем мне нужно сверстать эту страничку и как бы всё просто, но вот саму "полоску" я не знаю как сделать.
Для наглядности я выделил её на скриншоте ниже
5b6f3676c175a573279644.png
Может кто-нибудь знает как реализовать такую?
Вообще это страничка со всеми изменениями на сайте и информация будет туда добавляться как новости (грубо говоря)
Цвет желательно, чтобы был свой, указанный и чтобы он шёл по кругу
Пример: жёлтый > зелёный > синий > красный > жёлтый > зелёный > ...
  • Вопрос задан
  • 298 просмотров
Решения вопроса 2
profesor08
@profesor08 Куратор тега CSS
Создаешь svg, в нем создаешь блок, заливаешь его градиентом, далее при помощи clipPath вырезаешь контур.
Создаешь svg, в нем создаешь контур, заливаешь градиентом.
Создаешь div, его заливаешь градиентом, далее при помощи clip-path вырезаешь контур.
Создаешь div, в нем создаешь еще несколько, равное количеству линий и углов, задаешь линиям градиент, выстраиваешь их позиционированием и поворотами в нужные позиции, на угла ставишь оставшиеся в форме кружочков с градиентом, чтоб гладить углы.
Создаешь canvas, рисуешь градиентную кривую любым нагугленным способом.
Создаешь png, растягиваешь его и не паришься.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы