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

Question

[Сергей Бурдужа]

Нужно сверстать такие блоки


Думаю, что сперва сверстаю блок как есть, потом с помощью transform сдвину на 45 градусов, а контент внутри на 45 градусов в обратную сторону. Ну и блоку задать overflow: hidden.

Я правильно понимаю?
Завтра уже попробую.

Comments

[Иван]

да

[Сергей Бурдужа]

Иван, Ну, значит завтра и попробую, потом выложу код. Может кому пригодиться.

Answer 1

[Ольга Исакова]

Еще можете попробовать clip-path - с ним можно задать повернутый блок в 1 строчку без траснсформаций. Но IE и Edge запаздывают с поддержкой.
При желании можно даже анимировать контур.

Или можно использовать CSS Grid, как здесь, и повернуть изображения. Так можно ровно расположить элементы и охватить больше браузеров.