Как реализовать такой фон на сайте?

Question

[Петр]

Доброй ночи. Помогите разобраться с оформлением:)
Пробовал картинками через background-image и потом позиционировать.
Первые две фигуры получилось, а вот нижняя фигура почему то вытягивает весь сайт в ширину.
Что еще можно придумать помимо картинок?

Фон макета

Comments

[yarnstart]

background-image вытянула сайт в ширину, вы точно всё правильно делаете ? apps.eky.hk/css-triangle-generator как вариант

[Петр]

Евгений, то есть вариант с картинками не так уж и плох, надо только разобраться как грамотно все сделать?

[Сергей delphinpro]

Красный фон. Белые полосы сверху. Полосы можно градиентами, или трансформированными псевдоэлементами.

[Петр]

Сергей delphinpro, за основу брать красный а белым уже рисовать? Можно пример простой. Если не затруднит.

[Сергей delphinpro]

Петр, ну это как вариант. Да. прослеживаются белые наклонные полосы. Они могут быть псевдоэлементом каждой секции , трансформированным с помощью skew и откинутыми на задний план z-индексом.

[Сергей delphinpro]

Добавлю. Так стоит заморачиваться если есть взаимосвязь между контентом секций и фоновым рисунком. Если это просто треугольники, то Рустам ниже дал отличный вариант.

[Петр]

Сергей delphinpro, связь есть.
первая фигура в хедере, вторая в блоке услуг а третья в футере.

[Rustam Bainazarov]

Петр, если разные фигуры и они привязаны к секциям — абсолютное позиционирование картинки относительно секции. Можете на псевдоэлементе.

[Петр]

Рустам Байназаров, Попробую все варианты. Спасибо за помощь:)

[Rustam Bainazarov]

Петр, не за что, удачи!

Answer 1

[Brad9aga]

https://html5book.ru/css-figury/
overflow:hidden;
все куда проще чем ты думаешь
можешь еще и свг * ться

Comments

[Петр]

И вам спасибо:)

Answer 2

[Rustam Bainazarov]

background: url(ссылка на фон) repeat-y -150px 100% / 300px,
            url(ссылка на фон) repeat-y calc(100% + 150px) -50% / 300px;

Только надо на SVG перерисовать саму картинку по образу и подобию + свои размеры поставить фону. Думаю, вы сможете разобраться и увидеть закономерности в позиционировании относительно размера фона в коде:

Comments

[Петр]

Спасибо:)