Try this:
.trapezoid { transform: perspective(600px) rotateY(-45deg) scale(1.1,1.1); }
Adjust values as necessary.
Вопрос
I need to create a CSS3 trapezoid using a div element. To make it crystal clear what I'm doing I've created a basic visual below; green is a normal rectangular div while the red represents the parts I need to change the div to in order to achieve the trapezoid shape I need.
Provided that we're editing .trapezoid {}
CSS class what are the rules I need to achieve the shape? (Obviously the color is just reference).
Решение
Try this:
.trapezoid { transform: perspective(600px) rotateY(-45deg) scale(1.1,1.1); }
Adjust values as necessary.