梯形

梯形可以由高度为零（高度为 0px）的块元素，宽度大于零和边框构成，除了一侧外是透明的：

HTML：

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

CSS：

.trapezoid {
    width: 50px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
}

通过改变边界侧，可以调整梯形的方向。