How to make such blocks?

Question

css

What are the options for making such blocks? preferably some similar example.

Answer 1

Designer on count. Make pictures.

Answer 2

1. Make up a normal block (without bevels)
2. Convert blocks to canvas https://html2canvas.hertzen.com/
3. Create a curve in canvas and clip() elements
4. Replace blocks with canvas elements

Answer 3

try svg masks

Answer 4

the easiest way is to draw these blocks in Illustrator, and export to svg

Answer 5

In theory, you can take the lower part in svg, put it with a z-index above the photo and a negative margin up.
And the top above the photo in svg before.
Make three options, loop with :nth-child

Answer 6

Good afternoon.
I would do the following.
Image for navigation https://prnt.sc/s6yxr1
1)PNG image with position: absolute;
2) Text with the indents you need.
3) Picture at the bottom of the block (the background is uniform in color, there can be no problems