純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 畫三角形的原理