Дан такой макет:
Сверху фигура с картинкой и тенью, посередине тоже, снизу фигура с полупрозрачным цветом. Допустим, теней нет (для упрощения). Внутри блоков располагается произвольный контент, который может уходить друг под друга, растягивая основной блок. Также при увеличении или при уменьшении экрана сама фигура должна сохраняться.
Речь пойдет о среднем блоке:
Сначала я попытался разделить его на три логические части:
Фигуры сверху и снизу сверстал через svg. Возникла проблема в том, что фон расположен внутри основного блока и на svg его не получается натянуть.
Пошел по другому пути. Представил весь блок прямоугольником с png фоном.
Состыковка с нижним блоком прошла успешно, тк при помощи svg я сделал два желтых треугольника, которые перекрыли фон средней. А с верхним возникла проблема: при увеличении размера экрана граница блоков "стиралась" и они превращались в два прямоугольника. Это логично, тк у верхней, кроме как `background-size: cover` ничего не поставить.
Возникла идея каким-то образом сделать svg фигуру с фоновой картинкой и еще как-то html прикрутить, но мне кажется, что я усложняю и есть гораздо простые решения. Еще думал про clip-path, но поддержка браузерами никакая(
Буду очень благодарен за разъяснение того, как это верстать, чтобы фигура оставалась независимо от размера экрана/блока + было фоновое изображение.
Простой
Простой
