Is it possible to do this with CSS3?

Question

css

I tried to do it with transform: skew(x,y), but they can't be combined and I got only rhombuses with parallelograms. It is necessary to get a trapezoid from a rectangle with given angles:

Long life and a good wife to someone who will tell you how to do this without transformations on the server side.

Answer 1

For webkit, you can do this: -webkit-transform: perspective(200px) rotateY(45deg);
They write that 3D transformations are not supported in other browsers: www.w3schools.com/cssref/css3_pr_transform.asp

Answer 2

And if you draw two rectangles and move them in opposite directions?

Answer 3

Maybe you should use canvas?