梯形不僅僅是一個平凡無奇的形狀，它在網頁設計中也有著特別的運用，比如制作菜單、展示特色產品等等。下面將介紹如何用 CSS 制作梯形。

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

上述代碼是制作一個右下方向的梯形的 CSS 代碼。

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

如果想制作一個垂直的梯形，只需要將 height 和 width 的值對調一下，如上面的代碼所示。

如果想制作一個左下方向的梯形，只需要將 border-right 改成 border-left 即可。

同理，要制作左上方向的梯形，只需要改變 border-top 和 border-bottom 的位置，如下所示。

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

最后，如果想使梯形中間有文字，只需要將文字放在一個容器中，然后將容器的背景色和梯形的背景色設置成相同，就可以達到效果了。

通過上述方法，你可以輕輕松松制作出各種形狀的梯形，讓你的網頁展示更加出色。