如何用CSS绘制漂亮的梯形？

10 min read

可以使用CSS的transform和perspective属性来创建一个梯形。下面是一个简单的例子：

HTML代码：

<div class="trapezoid"></div>

CSS代码：

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 50px solid red;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: perspective(50px) rotateX(30deg);
}

解释：

  1. 首先，设置容器的宽度为200px，高度为0，这样才能创建一个梯形。

  2. 通过border-bottom属性设置梯形的底部边框，这里设置边框的颜色为红色，宽度为50px。

  3. 通过border-left和border-right属性设置梯形两侧的斜边，这里设置斜边的宽度为100px，颜色为透明。

  4. 使用transform属性中的perspective(50px)设置容器的透视值，使梯形更具有立体感。

  5. 使用transform属性中的rotateX(30deg)将容器绕着x轴旋转30度，使梯形更加倾斜。