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

Question

[WebforSelf]

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

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



Может кто то делал подобное? раньше я сталкивался но трансформом отделался, потому что блоки в одну сторону наклоненные были. а тут в разные.

Comments

[Сергей delphinpro]

https://developer.mozilla.org/ru/docs/Web/CSS/clip-path

[WebforSelf]

Сергей delphinpro, данный метод при изменении экрана разьезжается, пробовал сделать на нем.

[Виталий Першин]

WebforSelf, Что значит разъезжается? Если точки фиксированные то угол наклона будет меняться при разной ширине это вполне логично. Либо фиксируйте фон с неизменяемым размером, либо меняйте координаты точек при адаптации

[WebforSelf]

Виталий, я задавал в процентах ,

clip-path: polygon(0 0, 100% 25%, 100% 75%, 0% 100%);

[Виталий Першин]

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

[Rustam Bainazarov]

WebforSelf, надо на calc().

Вот пример, что я делал для другого вопроса

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

Полностью адаптивно.

Answer 1

[Rustam Bainazarov]

Clip-path, но координаты опорных точек просто в процентах не надо делать, надежнее через calc(), тогда будут четкие значения. И всё будет адаптивно + контент обрезать не будет. Можно менять скос, как в примере, на разных разрешениях + можно анимировать процесс.

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

Answer 2

[Vadim Bogomazov]

Sloped edges with consistent angle in CSS

Answer 3

[Антон Усачев]

Фон мостишь на враппер или боди, секции с фото можно обработать через clip-path: