А как вы делаете ломанные края у блоков?

Question

[I'm Yoda]

Привет всем!

Хочу узнать у вас товарищи, а как вы делаете кривые края у блоков на страницах.
Я этот вариант сделал через :before/: after + transform: skewY и куча брейкпоинтов, для большей гибкости при изменении размера браузера например.


Как бы сделали такой вариант?

P.S. Контейнер на всю ширину экрана.

Answer 1

[mills]

Я думаю что либо картинкой, либо дополнительный div с треугольником в css. Кто на что гаразд.

Answer 2

[Иван]

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

Answer 3

[Дмитрий]

Многие делают через SVG - гибче, чем картинки/CSS, и адаптивно, не нужно костылить. Для крайнего случая - прописать фоллбэки для древних браузеров. Вот здесь, например, изогнутая линия в начале экрана - .bottom-curvve.

Answer 4

[AlmeryCloud]

Можете попробовать через clip-path. Вот сайт где можно удобно построить любую фигуру - https://bennettfeely.com/clippy/