在做UI（頁(yè)面重構(gòu)）的時(shí)候，免不了和各種小圖標(biāo)打交道，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過(guò)偽類使用unicode解決大部分問(wèn)題。

現(xiàn)在我們來(lái)總結(jié)下幾種使用css繪制三角形的方法，dom結(jié)構(gòu)如下：

<div class="triangle"></div>

最簡(jiǎn)單最方便的辦法 background

代碼忽略

unicode

.triangle:after{
    display:block;
    content:"\25B2";
    color:"#fd5353";
    font-size:20px;
}

注意，偽類必須加上content屬性，否則不生效

unicode圖表

border

.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

使用border繪制三角形是什么原理？事實(shí)上，寬度相等的border是以45度對(duì)接的，如下圖：

image

那么沒(méi)有了上border就是如下圖：

image

再設(shè)置div的寬度為0，就是如下圖：

image

再設(shè)置div的高度為0，如下圖：

image

最后設(shè)置左右border的顏色為透明，如下圖：

image

再來(lái)個(gè)動(dòng)圖：

image

通過(guò)這種原理，我們可以做更多的圖形，比如五角星、六角星等，更多圖形請(qǐng)移步shapesofcss

使用css3 transform rotate

image

.triangle {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    
    //劃重點(diǎn)
    overflow:hidden;
}

.triangle: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    
    //劃重點(diǎn)
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

為什么是1.41，因?yàn)檎叫蔚膶?duì)角線長(zhǎng)度是約等于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ì)請(qǐng)移步 clip-path

原文