纯css画三角形

利用纯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 画三角形的原理