CSS中可以使用transform、skew和scale属性来绘制平行四边形、菱形等图形，本篇文章将介绍如何使用CSS绘制一个直角梯形。

.trapezoid {
  width: 200px; /* 设置直角梯形的宽度 */
  height: 0; /* 设置梯形的高度为0 */
  border-bottom: 100px solid red; /* 底边的宽度为200px，高度为100px，颜色为红色 */
  border-left: 50px solid transparent; /* 左侧边框的宽度为50px，颜色为透明 */
  border-right: 50px solid transparent; /* 右侧边框的宽度为50px，颜色为透明 */
}

代码中，我们使用了border属性来绘制梯形的底边和左右两侧斜边。具体来说，我们先将梯形的高度设置为0，再用border-bottom属性来设置底边的宽度和颜色。左右两侧斜边的颜色我们统一设置为透明，然后利用border-left和border-right来分别设置两侧的宽度。

此时我们得到的不是直角梯形，而是一个梯形，因为左右两侧的斜边并不垂直于底边。我们可以使用transform属性来将它们旋转一定的角度，使其垂直于底边。

.trapezoid {
  transform: skew(-30deg); /* 将左右两侧斜边逆时针旋转30度，使其垂直于底边 */
}

在transform里面，我们使用了skew函数，它接受两个参数：第一个参数为X轴方向上的旋转角度，第二个参数为Y轴方向上的旋转角度，这里我们只设置了X轴方向的旋转角度，值为负数是因为我们要将斜边顺时针旋转。

经过旋转后，我们得到了一个直角梯形，效果如下：