利用纯css来绘制一个三角形,只要控制好一个元素的border属性即可。
html 页面:
<div class="container">
HOT
<div class="tringer"></div>
</div>
css部分:
.container{
margin: 100px auto;
width:30px;
height:20px;
background: red;
color:#fff;
position: relative;
text-indent: 3px;
}
.tringer{
border-width: 6px;
border-style:solid;
border-color: transparent red transparent transparent;
position: absolute;
top:4px;
left:-12px;
}
效果图:
原理:
原理我就不说了,如果有小伙伴想知道,附赠一个连接,我觉得这位作者讲的还是蛮清楚的,css3 画三角形的原理