Как бы вы верстали такие элементы на сайте?

Question

[Владислав Бойченко]

Доброго времени суток!
Не знаю, как правильно (и даже как неправильно) сверстать один момент. Ссылка: i.piccy.info/i9/3f6d5fbda7ab3cff413ee66502d46542/1...
Имеются ввиду треугольники по бокам от сайта. Сложность в том, что они одновременно на двух разных секциях, у которых разный бэкграунд + макет по ширине 1920рх, соответственно, если экран 1366рх, то они должны быть еле видны, только кончики, а не полностью.
Надеюсь, объяснил понятно. Спасибо!

Answer 1

[Алексей Скляров]

Способов несколько:
1. Юзать :before,:after, задавать для них 100% высоту (т.е псевдоэлементы крепим к body), для этих псевдоэлементов уже добавлять параметры background-image и тд. Ну и собственно прячем все это с помощью (left: -50%; right:-50% {значения меняете}). Собственно все.
2. Все то же самое, только нарезаете треугольники и крепите каждый к нужной секции на сайте, но скорее всего у вас цельный бэкграунд, поэтому см. пункт 1.

Answer 2

[Дмитрий]

Вырезать этот треугольник в png с шириной в 1920px прижать к нужному краю с position: absolute.

И "background-position: left center" или right. В зависимости от стороны.

Answer 3

[Nikolay Yushin]

Можно заморочиться и вырезать через clip-path