How to lay out blocks that have an uneven joint?

Question

SVG

Hello.
There are such blocks. How can I make them with an uneven joint?
Once upon a time I saw something like doing something similar through svg. Now I can't find it and I don't know how.

Answer 1

Crop the edges of the photo as needed and bring the blocks together by overlapping each other

Answer 2

Use clip-pathin CSS, although they write that its support is not so hot
Example with SVG path for Bezier curves

Answer 3

https://jsfiddle.net/6qvnnbps , then I think you'll figure it out.

Answer 4

I agree with Eugene. And you can only cut the bottom.

Answer 5

as an option to play with border-radius and skew www.css3.info/preview/rounded-border https://css-tricks.com/examples/ShapesOfCSS/