用CSS畫一個三角形藕溅，是不難的問題肤舞，但我卻掌握的不夠熟練，例如當(dāng)要求為畫一個直角三角形或者等腰三角形己莺，我就有點反應(yīng)不過來笤休。所以尖飞，在這篇中點透它，以后再見店雅，不含糊政基。
原理分析
用CSS畫三角形，實際上就是在一個框的四邊上做文章闹啦，如果有一個div沮明，為其設(shè)置100px的寬和高，并給其添加10px的黑色邊框窍奋，這四條邊形成一個閉合的正方形荐健，那么這四條邊如何分才能達(dá)到平均分配的效果呢？那只能是這樣：
可以看到琳袄，每一條邊單獨拉出來看就是一個梯形江场，而用CSS畫三角形其實就是從這個梯形下手，如何把這個梯形轉(zhuǎn)換為一個三角形扥問題窖逗。
其實原理很簡單址否，當(dāng)div的寬和高逐漸變小的時候，其中央的留白部分逐漸變小碎紊，四條邊向中央收縮佑附，例如，當(dāng)寬高都變成50px的時候仗考，就是這個樣子了：
可以想象帮匾，當(dāng)寬高為0的時候，中間的空白將不可見痴鳄，而邊框會恰好融合成為一個黑色的矩形，而此時缸夹，每一條邊就是一個三角形痪寻，當(dāng)為四條邊添加不同的顏色，并增大邊框?qū)挾戎笏洳眩梢悦魑乜闯龃藭r各邊的形態(tài)：
div {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: green yellow black orange;
}
這時候就很清晰了橡类，我們只需要使其中三條邊不可見，則可見的部分就是一個三角形芽唇。為達(dá)目的顾画，很簡單取劫，將三條邊顏色設(shè)置為透明即可以。
border-color: transparent transparent black transparent;
當(dāng)當(dāng)當(dāng)當(dāng)~效果如下：
這個時候研侣，其他三個邊是存在的谱邪，只不過是透明的，那么庶诡，我們可不可以直接將其他三條邊取消呢惦银？——當(dāng)然不可以，沒有寬高度只有一條邊末誓，這個div還能夠出現(xiàn)嗎~
到此扯俱，最基本的三角形就簡單地完成了，可以看到喇澡，三角形的高就是div的底邊寬度迅栅，若要三角形更尖（斜度更大）一些，只需要加大底邊的寬度即可晴玖。而底邊的長度读存，則由兩條側(cè)邊的寬度決定，兩者加起來的寬度就是三角形底邊的寬度窜醉，而div頂部的一條邊框的寬度則只會影響三角形定點距離四條邊形成矩形的頂部的距離宪萄。
明白了原理之后，想畫什么三角形就很簡單了榨惰。例如拜英，一個直角三角形，如果直角邊為右邊和底邊的話琅催，則需要將右邊框設(shè)置為0了居凶。也就是border-right-width: 0;若要一個鈍角三角形，則將左右兩邊的邊框?qū)挾燃哟蠹纯梢蕴俾铡．?dāng)然也可以作出各個朝向的三角形了侠碧。
實現(xiàn)一個收藏Icon
學(xué)會了畫三角形，還可以在此基礎(chǔ)上來創(chuàng)造出許多形狀的圖形缠黍，例如下面這個常見的收藏圖案：
如何在一個div中使用CSS完成這樣的效果呢弄兜？通過觀察，不難發(fā)現(xiàn)瓷式，這個icon其實是一個正方形減去一個三角形構(gòu)成的替饿，所以我們的思路就很清晰了，將下面一個三角形變成透明就可以了~
div {
width: 0;
height: 0;
border: 50px solid #ff5500;
border-bottom-color: transparent;
}
和偽元素結(jié)合實現(xiàn)雙箭頭
畫一個三角形是很簡單的贸典，那么畫一個像下面這樣的雙箭頭呢视卢？
當(dāng)然，可以用兩個 div 來很快實現(xiàn)廊驼，但是為了不增加多余的標(biāo)簽据过，可以使用偽類實現(xiàn)這個效果惋砂。
div,
div:after {
width: 0;
height: 0;
display: inline-block;
border: 50px;
border-style: solid;
border-color: transparent #ff5500 transparent transparent;
}
div::after {
content: "";
margin-top: -50px;
}
實現(xiàn)Tips氣泡
同樣借助偽元素，可以實現(xiàn)一個像下面這樣的氣泡绳锅。
使用偽元素來實現(xiàn)氣泡右端的直角三角形西饵，通過position: absolute;來將它定位。代碼如下：
div {
width: 90px;
height: 40px;
border-radius: 3px;
background-color: #009bdb;
position: relative;
color: #fff;
font-size: 14px;
padding-left: 10px;
line-height: 40px;
}
div:after {
content: "";
width: 0;
height: 0;
display: inline-block;
border-style: solid;
border-width: 0 8px 8px 10px;
border-color: transparent transparent transparent #009bdb;
position: absolute;
top: 12px; left: 100px;
}
從上面的例子可以看出榨呆，運(yùn)用的原理大同小異罗标，只要靈活變通，就可以實現(xiàn)形態(tài)各異的圖形組合积蜻。
