@flighter7

Как сверстать адаптивную фигуру с фоновым изображением?

Дан такой макет:
5acd5f7cb91fc561242697.png
Сверху фигура с картинкой и тенью, посередине тоже, снизу фигура с полупрозрачным цветом. Допустим, теней нет (для упрощения). Внутри блоков располагается произвольный контент, который может уходить друг под друга, растягивая основной блок. Также при увеличении или при уменьшении экрана сама фигура должна сохраняться.

Речь пойдет о среднем блоке:
Сначала я попытался разделить его на три логические части:
5acd60e3a09f7153783384.png
Фигуры сверху и снизу сверстал через svg. Возникла проблема в том, что фон расположен внутри основного блока и на svg его не получается натянуть.

Пошел по другому пути. Представил весь блок прямоугольником с png фоном.
5acd64630a733056944013.png
Состыковка с нижним блоком прошла успешно, тк при помощи svg я сделал два желтых треугольника, которые перекрыли фон средней. А с верхним возникла проблема: при увеличении размера экрана граница блоков "стиралась" и они превращались в два прямоугольника. Это логично, тк у верхней, кроме как `background-size: cover` ничего не поставить.

Возникла идея каким-то образом сделать svg фигуру с фоновой картинкой и еще как-то html прикрутить, но мне кажется, что я усложняю и есть гораздо простые решения. Еще думал про clip-path, но поддержка браузерами никакая(

Буду очень благодарен за разъяснение того, как это верстать, чтобы фигура оставалась независимо от размера экрана/блока + было фоновое изображение.
  • Вопрос задан
  • 588 просмотров
Решения вопроса 1
@flighter7 Автор вопроса
Пришлось всё таки использовать clip-path. Надеюсь, что браузеры не подведут)
Пример: https://codepen.io/FLighter/pen/dmrdBm
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId Куратор тега SVG
I want, women not to get sick
Вам надо не треугольники делать , а сделать маску- фильтр который будет добавлять маску к фото ...некий прозрачный бордюр в виде треугольника т.е как бы перекрывать картинку этим бордюром .... если у меня получится это сделать я покажу пример

Вот смотри : я применил маску как и написал выше : https://codepen.io/topicstarter/pen/YagNyJ?editors=0110
это пример адаптивной маски: https://codepen.io/topicstarter/pen/NYJdjx
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы