bugo_aneo
@bugo_aneo
Верстальщик по жизни, буддист, кофеман

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

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

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

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

Имел ли кто дело с таким запросом? Заранее БЛАГОДАРЮ за ответ.
  • Вопрос задан
  • 369 просмотров
Пригласить эксперта
Ответы на вопрос 3
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Мне кажется лучше играться с svg
pattern-blog.com.ua/article/skoshennyie-elementyi-...
bennettfeely.com/clippy
Ответ написан
Комментировать
@forspamonly2
а тут вроде бы чистых градиентов и нету. даже на голубой части есть куски фотографий. если делать эти куски в пнг и класть поверх градиента, то вполне может оказаться что весит он больше, чем если в одном джипеге пожать до упора градиентный фон. получается, что смысла разделять любые два скошенных блока просто нет, раз они оба картинками.
поэтому, вполне приемлемый вариант - оставить всё несколькими сплошными битмапами по границам горизонтальных блоков. к тому же, это будет справедливо: лохотронщики должны страдать.

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

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

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