在用 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/
版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。