Как сделать переход секций в подобной манере?

Question

[imageneyshen]

пока учусь. с таким еще не сталкивался. Не знаю как определять всю секцию при таких раскладах, чуть по длинее по высоте, или чтоб захватывала эти наклонные линии, как они сами создаются, за счет чего, какие методы есть? Как начинать секцию после этих фигур?

Comments

[Rustam Bainazarov]

SVG, т. е. картинкой.

Можно градиентами сделать, наверное, но я бы не стал геморроится.

[yadscreech]

Просто возьми как фон его - это намного быстрее и не так геморно, а так можно было добавить блок, с абсолютным позиционирование и в нем ещё блоки из которых бы ты сделал треугольники с помощью CSS и тоже с позиционировать их как тебе нужно, но это очень долго и не просто, поэтому просто скопируй картинкой и все, все равно никто не увидит и не оценит что ты запотел и сделал это через CSS.

[imageneyshen]

yadscreech, я взял как фон, но проблема в том что его нельзя сделать на весь экран. Потому что если фон секции поставить на center no repeat то по бокам сайта белые колонки. а если убрать center no-repeat, то все нормально, но снизу эти желто серые линии повторяются и теряют в качестве

[yadscreech]

imageneyshen, background-size, да и в целом почитай про background

Answer 1

[Андрей]

Берешь png с этими элементами без фона и делаешь псевдоэлементом или просто бэкграундом
https://codepen.io/begprod/pen/voBRPM