以前在公司做項目的時候遇到過要放一個三角到頁面上，當時根本不懂前端，做了半天最后直接ps做了一個三角用<img>放了上去，光調line-height就花了好久。
今天看了篇文章講怎么用css畫三角，頓時茅塞頓開，也深深為以前自己的二逼感到羞愧。
不過這篇文章一沒講原理，二內(nèi)容偏少，我打算做一些擴展，先上代碼：
<style>
.fourC {
border: 100px solid;
border-left-color: red;
border-bottom-color: green;
border-top-color: blue;
border-right-color: yellow;
width: 0px;
}
</style>
<div class="fourC">
</div>
可以看到一個沒有寬度的div成為了一個四色的方塊，最早的border寬度為盒子模型的寬度加上1px，然而由于盒子模型本身就包含border，隨著border增大，整個盒子也相應的增大，最后就成為了一個四色的正方形色塊。
我們發(fā)現(xiàn)這個正方形是由四個三角形組成的，如果我們想要一個三角形，那讓其他三個看不見即可。
最簡單的方法，將三個三角形的背景色設置成透明即可，看代碼：
<style>
.triangle {
border: 100px solid transparent;
border-bottom-color: green;
width: 0px;
}
</style>
<div class="triangle">
</div>
將其與border的顏色設為transparent純透明，單獨設置bottom-border的顏色，就能單獨留下一個三角形。
這時候還有一些不好，因為雖然border設為了透明，但是實際上還是占用了更大的空間的，此時我們可以優(yōu)化一下，把頂部的border設為0，這樣三角就不會額外的占據(jù)額外的頂部空間。
<style>
.triangle {
border: 100px solid transparent;
border-top: 0
border-bottom: green;
width: 0px;
}
</style>
<div class="triangle">
</div>
目前的三角形可以說勉強夠用了，不過我們還能做更多，比如客制化三角的形狀，思考一下三角的形狀是由什么決定的。
這個三角實際上是由兩個直角三角形拼出來的，兩個直角三角形的直角邊分別是border-left和border-bottom，border-right和border-bottom。
而三角形的形狀是由三邊三角決定的，這幾樣東西都能夠通過三個border來計算出，所以只要通過簡單的修改border就能改變?nèi)切蔚男螤睿热缒銣p少border-left和border-right，就能畫出一個偏細的三角形。
