Как верстаются подобные блоки?

Question

[Treniki]

Доброго времени суток. Увидел в макете LP такую часть:

Я здесь вижу 3 блока, которые так или иначе вливаются друг в друга. Что-то, вроде, этого:

Как бы вы сверстали подобное? Где бы вы провели линии? А рисунки с текстом в третьем блоки вы бы каким образом расставили? Что вообще думаете о подобном месте в макете?

Comments

[Егор Казанцев]

Можно вопрос конкретнее

Answer 1

[Anton fon Faust]

Без разницы как: хочешь - два дива плюс transform: skew, хочешь - два дива плюс border. Всеравно дальше позиционирование и z-index.
Для любителей поизвращаться можно и svg в бекгаунд впихнуть, но браузеры на них память кушают хорошо.

Answer 2

[Капитан Какао]

Сразу пришло в голову 3 Варианта.

1. Сделать картинками. То есть тупо нарезать изображения и поставить их как фоновые.
2. Сделать треугольники на css (не уверен что можно сделать их адаптивными).
3. Старым добрым SVG, тут и адаптивность и гибкость, всё как положено.

ДЕМО: https://jsfiddle.net/RadCor/ob74ucge/

Comments

[Максим Тимофеев]

предлагаю заменить "Старым добрым SVG" на "Современным удобным SVG", он же только жить начинает. А вы его на пенсию)))

[Капитан Какао]

Максим Тимофеев: согласен)