Is it possible to make such a menu?

Question

css

You need to make an adaptive menu for a site like this:

Of all the guides on the Internet, it turns out to make these blocks only of a static size. In which direction to dig, or are there ready-made examples that can be disassembled? Since the search did not even return similar results.
I will add that I want to use this menu as a collapse element from bootstap.
The middle blocks, if the right picture is available, are described quite easily, the problem is with the top and bottom.
jsfiddle.net/qsdmhgz5

Answer 1

I knew that designers were a little jaded. But not to the same extent.
You can of course, even something like this was on the Toaster, look.
More or less like this.

Answer 2

Can. But the question remains in which browsers it should be supported.

Answer 3

And what's so difficult? The blocks are distorted with transform: skew, inside of them the text/background is distorted in the opposite direction with the same degree.

Answer 4

And in addition to css-transform, by the way, you can also see svg elements - ordinary html inline-svg elements have level support.
codepen.io/AMar4enko/pen/wMOOaQ