Как сверстать два соседних скошенных блока, если у них есть бекграунды?

Question

[Полина Емельянова]

Добрый день, коллеги.

У меня вопрос, на который есть тысяча "тостов", но я не могу подобрать нужный.
САБЖ:
Есть дизайн сайта, у которого все секции имеют скошенный верх/низ. При этом у каждой секции есть или градиент или фото-бекграунд.


ВОПРОС:
Как, по-уму, сверстать такое?
clip-path - да, но он имеет гадское свойство сродни overflow: hidden;
transform + псевдо - как именно? Не могу додуматься кому задавать подложку, чтобы она не вылезла за скос и не перекосилась сама, а также растянулась на всю видимую(!) площадь.

Имел ли кто дело с таким запросом? Заранее БЛАГОДАРЮ за ответ.

Answer 1

[Максим Тимофеев]

Мне кажется лучше играться с svg
pattern-blog.com.ua/article/skoshennyie-elementyi-...
bennettfeely.com/clippy

Answer 2

[Сергей]

Как сверстать скошенный блок?
Срезанные/скошенные углы у DIV-слоя с произвольным фоном внутри него и под ним на чистом CSS. Реально ли?
https://www.google.ru/search?q=%D0%9A%D0%B0%D0%BA+...

Comments

[Полина Емельянова]

Простите, вы пытались что-то сотворить сами по своему ответу?
Я - да.
Ничего кроме клип-паса у меня не получилось путного, к сожалению.
Поэтому и спрашиваю у коллег.

[Сергей]

Полина Емельянова, Посмотрите например zbs-auto.ru

Answer 3

[forspamonly2]

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

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