css实现梯形

作者：笔触狂放9 | 2024-02-27 06:29:41

踩

css实现梯形

<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 的宽度和颜色来创建不同样式的梯形。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】