Как сделать этот разлом после изображения?

Question

[Shinigamius]

Само изображение в фотошопе квадратное, нужно как то сделать так, что бы фон налезал на изображение или что то тому подобное.
Есть следующие варианты:
1. Вырезать изображение в фотошопе.
2. Взять изображение вместе с фоном как единый img.
Но оба варианта какие то хамские.

Comments

[Rustam Bainazarov]

Самое простое из кроссбраузерного — псевдоэлемент с SVG на фоне.

Answer 1

[Тарас Шульга]

И так варианты решение данной проблемы:
1. Поиграться с svg маской.
2. after/before.
3. Самое простое, но там поддержка еще немного хромает clip-path(тык-тык - это ссылка)
А вот его поддержка тык

Comments

[Тарас Шульга]

Xdevelx, ой, и правда ошибся - видимо еще не проснулся - поправил)

Answer 2

[Karpion]

Я плохо вижу, могу ошибаться. Мне кажется - это просто одна картинка, разлом просто нарисован на ней.