CSS3转换为梯形

Question

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

如果我们正在编辑.trapezoid {}CSS类,那么实现形状需要什么规则？(显然颜色只是参考).

Answer 1

试试这个:

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

根据需要调整值.