CSS3转换为梯形

Question

我需要使用div元素创建一个CSS3梯形。为了清楚地说明我在做什么，我在下面创建了一个基本的视觉效果;绿色是一个普通的矩形div，而红色代表我需要改变div的部分，以达到我需要的梯形形状。

如果我们正在编辑.trapezoid {} CSS类，那么实现这种形状需要什么规则？ （显然颜色只是参考）。

Answer 1

试试这个：

.trapezoid { transform: perspective(600px) rotateY(-45deg) scale(1.1,1.1); }

根据需要调整值。