[分享]css做一个直角梯形

在CSS中，要实现一个直角梯形并不难，我们只需要利用CSS的一些基本属性来控制元素的形状和大小即可。

.trapezoid{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid #333;
    border-bottom: 50px solid transparent;
} 

上面这段代码中，我们首先给元素设置了一个宽度和高度为0，接着定义了三个边框，一个上边框，一个右边框和一个下边框。

其中上边框的宽度为50像素，颜色为透明，也就是不可见的。下边框与上边框相同。右边框的宽度为100像素，颜色为#333，也就是黑色。

这样我们就得到了一个宽度为0，高度为0，下边为50像素，右边为100像素的直角梯形。

当然，如果我们想要直角梯形的高度或宽度更大，只需要修改边框的宽度即可。

最后，要注意的是，当我们使用直角梯形时，元素的内容将会显示在梯形的右下角。如果需要将内容显示在梯形内部，我们需要使用绝对定位，并将top和left属性设置为0。

.trapezoid{
    position: relative;
}
.trapezoid p{
    position: absolute;
    top: 0;
    left: 0;
} 

上面的代码中，我们给元素设置了相对定位，接着在元素内部嵌套了一个p标签，利用绝对定位将p标签置于梯形的左上角。

这样一来，我们就获得了一个既漂亮又实用的直角梯形。