Как сверстать блок из трёх частей, необычной формы?

Question

[simba64]

Есть блок. в нём 3 изображения, высота 800px ширина 1900px. 3 исходника прикрепил. Каким способом/ами можно сверстать этот блок?
Пытался верстать фигурами- параллелограмм и трапециями, но всё съезжает. Сейчас думаю сделать, как SVG изображения, во flex боксе. Можно ли их будет наслоить/наложить друг на друга(svg изображения), и потом делать с ними разные стили(анимации, градиент при наведении, уменьшение и тд.)?

Answer 1

[approximate solution]

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

Comments

[Вадим]

simba64, туда же: https://levelup.gitconnected.com/super-hero-layout...

[Lord_Dantes]

Вадим, причем тут это )

[Вадим]

Lord_Dantes, Причём тут создание сложного колажа с помощью clip-path для вопроса автора?

[Lord_Dantes]

Вадим, вы привели совсем не тот пример который автор указал в скринах.

[Вадим]

Lord_Dantes, В этом и разница между примером и решением

[Lord_Dantes]

Вадим, вы просто сверхразум. Автор просит как это реализовать. Вы просто скидываете ссылку где реализовано это вообще в другом варианте наполовину не похоже и предлагаете это под прелогом примера.

[Вадим]

Lord_Dantes, Я не пойму, у Вас какие-то проблемы восприятия информации? Да и в целом? Зачем Вы мне это всё пишите?
Я предложил это в качестве ответа? Нет.
Я предложил автору скопипастить? Нет.
Я сказал что эта демка полностью решает вопрос автора? Нет.
Я оставил комментарий к документации по конкретному свойству. В этом комментарии разбирается в том числе как этим свойством пользоваться, а в демке конечный результат, который очень похож, на то, что нужно автору.

Автор просит как это реализовать.

Нет.

Каким способом/ами можно сверстать этот блок?

Автор спрашивает. Спрашивать != просить.

А теперь ответим на главный вопрос.
Автор спрашивает:

Как сверстать блок из трёх частей, необычной формы?

Открываем демку, которую я прикрепил к комментарию и что же мы там видим? Блок из нескольких частей "необычной" формы.

А теперь обратитесь к поисковику и загуглите разницу между решением задачи, образцом для решения и примером решения.

[Вадим]

Lord_Dantes, Если считаете что статья и демка, в которой используется clip-path не подходит для решения задачи автора, которая решается с помощью clip-path, то разговаривать не о чём.

[Lord_Dantes]

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

Ваш дедуктивный метод подобен выступлению клоуна в цирке.

[Вадим]

Lord_Dantes, Удачи :-)