@WebforSelf

Как сверстать наклонные блоки на css?

Добрый день ,есть макет, где блоки идут с наклоном.
https://codepen.io/sfi0zy/pen/MbzWwM
Нашел вот такое решение, но тут проблема заключается в том что это решение подходит где фон залит цветом, а у меня каждый блок (фон изображение) поэтому через псевдоэлементы не могу сделать.

Пробовал сделать через transform , но там крутится весь блок, поэтому получается что блоки надо накладывать друг на друга, из за этого получается криво.

5d8c930e2085d962972196.png

Может кто то делал подобное? раньше я сталкивался но трансформом отделался, потому что блоки в одну сторону наклоненные были. а тут в разные.
  • Вопрос задан
  • 276 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Clip-path, но координаты опорных точек просто в процентах не надо делать, надежнее через calc(), тогда будут четкие значения. И всё будет адаптивно + контент обрезать не будет. Можно менять скос, как в примере, на разных разрешениях + можно анимировать процесс.

clip-path: polygon(0% 0%, 100% calc(0% + 60px), 100% calc(100% - 60px), 0% 100%);
/* calc(100% - 60px) -- вот тут задал четкую ширину скоса */


Ответ написан
Пригласить эксперта
Ответы на вопрос 2
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Фон мостишь на враппер или боди, секции с фото можно обработать через clip-path:

Ответ написан
Ваш ответ на вопрос

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

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