Как сделать линию зигзагом css?

Question

[WebforSelf]

Нужно на фон поставить такие линии, думаю сделать линию из 4 частей по 25% и каждую покрасить



Но чет получается дичь

Comments

[Rustam Bainazarov]

Картинка на фон?

[WebforSelf]

Рустам Байназаров, в том то и дело что хочу сделать данный фон на css и просто оцентровать.
То есть по задумке зигзаг разделенный на 4 цвета чтоб в итоге получилась одна линия такого плана, а блоки которые 3 уже сделал через clip path

[Rustam Bainazarov]

WebforSelf, SVG, либо блок с градиентом, а форму сделать с помощью всё того же clip-path. Смысла, однако, я не вижу в последнем, хоть это и возможно.

[Rustam Bainazarov]

WebforSelf, хотя вам проще будет так:


Старый-добрый skew. Вот только будет не очень просто сделать вершины на разной высоте, но что поделать.

[Ankhena]

Стыки не видны, так что проще всего фоновыми градиентами, чтобы не городить лишних элементов в разметке.

[WebforSelf]

Ankhena, градиентом не получается сделать, может я чего то не понимаю, через псевдоэлемент?

[Ankhena]

WebforSelf, нет, просто 4 фоновых градиента. Что именно не получается?

[WebforSelf]

Ankhena, если фоном заливаю, то заливается же весь блок, а не полоска, как именно фоном сделать полоской, вот это не понимаю как с градиентом работать.

[Ankhena]

WebforSelf, по мотивам: https://jsfiddle.net/8qhy3dmw/

Answer 1

[RAX7]

Comments

[WebforSelf]

Это гениально, SVG решает практически все задачи сейчас. Вы мега спец! Спасибо, буду изучать