Is it possible to draw a block with beveled edges through the canvas and place html there?

Question

css

You need to draw similar bevels, these blocks have parallax, all the ways that I tried are not suitable for oblique corners like here. Hope only for canvas. Is it possible to draw a block with beveled edges through the canvas and place html there?
photo 1

photo 2

Answer 1

There are basically two ways to do this today:
- clip-path
- transform
clip-path is the normal way, not a trick. But with cross-browser compatibility, everything is bad with him.
transform is more of a trick. Outer block skewY(5deg), nested skewY(-5deg).
Here is an example codepen.io/AMar4enko/pen/LbMmWe