在用 css 画梯形的过程中,主要使用 border-right-color: transparentborder-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 画等腰梯形?大家不妨自己动动手实现下。