Как сверстать блоки, у которых неровный стык?

Question

[Дамир Саяхов]

Привет.
Есть вот такие блоки. Как можно их сверстать с неровным стыком?
Когда то давно видел вроде что-то подобное делали через svg. Сейчас не могу найти и не представляю как.

Answer 1

[Евгений Саймон]

Обрезать на фото края как надо и свести блоки наложив друг на друга

Answer 2

[Vitaliy]

Используйте clip-path в CSS, хотя пишут, что его поддержка не ахти
Пример с SVG path по кривым Безье

Answer 3

[Андрей Федосеев]

https://jsfiddle.net/6qvnnbps, дальше думаю разберетесь.

Comments

[Дамир Саяхов]

этот вариант для сплошного цвета, но не для бекграунда
https://jsfiddle.net/6qvnnbps/5/

Answer 4

[Ольга Ветер]

Присоединяюсь к Евгению. Причем обрезать можно только нижний.

Answer 5

[maxsolovyov]

как вариант поиграть с border-radius и skew www.css3.info/preview/rounded-border https://css-tricks.com/examples/ShapesOfCSS/