在做UI（頁面重構(gòu)）的時候巡通，免不了和各種小圖標(biāo)打交道尘执，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過偽類使用unicode解決大部分問題宴凉。
現(xiàn)在我們來總結(jié)下幾種使用css繪制三角形的方法誊锭，dom結(jié)構(gòu)如下：
<div class="triangle"></div>
最簡單最方便的辦法 background
代碼忽略
unicode
.triangle:after{
display:block;
content:"\25B2";
color:"#fd5353";
font-size:20px;
}
注意，偽類必須加上content屬性弥锄，否則不生效
border
.triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
使用border繪制三角形是什么原理丧靡？事實上，寬度相等的border是以45度對接的籽暇，如下圖：
image
那么沒有了上border就是如下圖：
image
再設(shè)置div的寬度為0温治，就是如下圖：
image
再設(shè)置div的高度為0，如下圖：
image
最后設(shè)置左右border的顏色為透明图仓，如下圖：
image
再來個動圖：
image
通過這種原理罐盔，我們可以做更多的圖形但绕，比如五角星救崔、六角星等，更多圖形請移步shapesofcss
使用css3 transform rotate
image
.triangle {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
//劃重點
overflow:hidden;
}
.triangle: before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
//劃重點
transform-origin: 0 100%;
transform: rotate(45deg);
}
為什么是1.41捏顺，因為正方形的對角線長度是約等于1.414六孵。
使用clip-path
.triangle{
width:200px;
height:200px;
background:#fd5353;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
clip-path不支持安卓4.4以下，其余均需使用瀏覽器前綴-webkit幅骄，caniuse
詳細(xì)請移步 clip-path
