簡(jiǎn)言
本文簡(jiǎn)要闡述了用CSS邊框的方法在頁(yè)面上繪制三角形，包括幾種典型的三角形繪制，還介紹了幾個(gè)簡(jiǎn)單的應(yīng)用場(chǎng)景晴氨。利用邊框繪制三角形方法只是眾多方案中的一種茄茁，大家根據(jù)項(xiàng)目實(shí)際魂贬，選用最適宜項(xiàng)目的方案。
1 基本原理
在CSS中裙顽，我們可以利用border-top付燥、border-left、border-bottom愈犹、border-left四個(gè)屬性來(lái)繪制三角形键科。實(shí)現(xiàn)的基本原理參見(jiàn)下面的演示代碼及其運(yùn)行結(jié)果。
核心代碼：
.box {
width: 50px;
height: 50px;
border-top: 50px solid red;
border-left:50px solid blue;
border-right: 50px solid green;
border-bottom: 50px solid yellow;
}
運(yùn)行結(jié)果：
從以上代碼及運(yùn)行結(jié)果不難想出繪制三角形的辦法漩怎，我們只要將 .box 的長(zhǎng)度和寬度都設(shè)成0勋颖，就可以得到四個(gè)等腰三角形。再將不想保留的三角形邊框顏色設(shè)置成透明色（即：border-color : transparent）就可以隱藏掉不想保留的三角形勋锤。從而完成三角形的繪制饭玲。
2 繪制三角形
2.1 等邊三角形
等邊三角形（又稱正三邊形），為三邊相等的三角形叁执，其三個(gè)內(nèi)角相等茄厘，均為60°矮冬，它是銳角三角形的一種。等邊三角形也是最穩(wěn)定的結(jié)構(gòu)次哈。
2.1.1 尖角向上：
.triangle-up {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 57.735px solid transparent;
border-right: 57.735px solid transparent;
}
2.1.2 尖角向下：
.triangle-down {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 57.735px solid transparent;
border-right: 57.735px solid transparent;
}
2.1.3 尖角向左：
.triangle-left {
width: 0;
height: 0;
border-right: 100px solid red;
border-top: 57.735px solid transparent;
border-bottom: 57.735px solid transparent;
}
2.1.4 尖角向右：
.triangle-right {
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 57.735px solid transparent;
border-bottom: 57.735px solid transparent;
}
2.2 等腰直角三角形
等腰直角三角形是特殊的等腰三角形欢伏，它的兩底角相等，都是45°亿乳；它的兩腰長(zhǎng)度相等硝拧。
2.2.1 左上直角：
.triangle-top-left{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
2.2.2 右上直角：
.triangle-top-right {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
2.2.3 左下直角：
.triangle-bottom-left{
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
2.2.4 右下直角：
.triangle-bottom-right {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
3 相關(guān)應(yīng)用
3.1 彈出框(popover)組件
彈出框(popover)或提示框(tooltip)一般都會(huì)用到三角形，三角形明確并加強(qiáng)了指向作用葛假。類似于Bootstrap的Popover和Tooltip組件都用到了邊框三角形的實(shí)現(xiàn)方式障陶。
上述演示只是實(shí)現(xiàn)了頂部彈出框，其它方向彈出框參考上述實(shí)現(xiàn)方式即可聊训。
3.2 視頻播放按鈕
視頻播放按鈕(Play button)可以采用邊框三角形的實(shí)現(xiàn)方式抱究。
三角形的應(yīng)用場(chǎng)景還有很多，比如下拉菜單(dropdown menu)中带斑，或者是“頂”及“踩”按鈕等鼓寺。
邊框?qū)崿F(xiàn)三角形只是眾多方案之一，大家可以根據(jù)項(xiàng)目實(shí)際勋磕，選擇小圖標(biāo)方案或選用SVG方案妈候。
