纯 CSS 实现梯形

在用 css 画梯形的过程中，主要使用 border-right-color: transparent 或 border-left-color: transparent 实现，实现方式代码如下：

html 代码：

<div class="box box1">
    <span class="text1">标签标题</span>
</div>
<div class="box box2">
    <span class="text2">标签标题</span>
</div>

css 代码：

.box {
    width: 164px;
    border: 50px solid;
    border-right: 12px solid;
    border-left: 24px solid;
    border-color: #666666;
    font-size: 26px;
    position: relative;
    margin: 20px 0;
    color: #FFFFFF;
    line-height: 50px;
}

.box1 {
    border-bottom: none;
    border-right-color: transparent;
}

.box2 {
    border-top: none;
    border-right-color: transparent;
}

.text1 {
    position: absolute;
    top: -50px;
}

.text2 {
    position: absolute;
}

最终实现效果如下图：

思考

如何采用 css 实现如下类似效果？如何通过上述方式用 css 画等腰梯形？大家不妨自己动动手实现下。

版权属于：瞭月

本文链接：https://www.lervor.com/archives/173/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。