<div class="trapezoid"></div>
.trapezoid {width: 200px;height: 0;border-bottom: 100px solid red; /* 定义梯形的底边 */border-left: 50px solid transparent; /* 定义梯形的左边 */border-right: 50px solid transparent; /* 定义梯形的右边 */}
这段代码中的类名为 trapezoid
的 div 元素通过设置 width: 200px; height: 0;
,并使用 border
属性来创建梯形的形状。 border-bottom
定义了梯形的底边,而 border-left
和 border-right
分别定义了梯形左侧和右侧的斜边。您可以根据需要调整 border
的宽度和颜色来创建不同样式的梯形。