[分享]css做一个有边框的梯形

CSS 可以让我们很容易地创建漂亮的图形，比如有边框的梯形形状。下面是一个使用 CSS 创建梯形的代码示例：

.trapezoid {
  border-bottom: 50px solid #4CAF50;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
} 

这段 CSS 代码会为一个具有梯形形状的元素设置边框。元素的底部边框是绿色的，这是因为我们使用的颜色代码是 #4CAF50。同时，左侧和右侧的边框是透明的，因此最终呈现出来的形状是梯形。

通过调整边框的大小和宽度，我们可以创建任意大小和形状梯形。例如，我们也可以创建一个另外样式的梯形，如下所示：

.trapezoid {
  border-bottom: 50px solid #FF5722;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  height: 0;
  width: 150px;
} 

这段代码将会创建一个具有橙色边框的更大的梯形。

使用 CSS 制作有边框的梯形是一种很有意思的方法，它让我们可以用极少的代码产生独特的图形效果。你可以修改代码来改变梯形的大小和颜色，试试看吧！