使用純CSS畫三角形，記得去年自己就碰到過。但是當時只是一味的在網(wǎng)上粘貼復制了寫代碼，并沒有深究其原理。今天特地寫一個學習筆記，記錄一下。
大家都知道的盒模型，默認情況下形狀是矩形的。下圖為設置了width=200px div的盒模型。
盒模型
下面我們來看一看border。
html代碼：
<div id="demo"></div>
css：
#demo{
width:100px;
height:100px;
border:3px red solid;
}
效果如圖所示：
border
以上的效果我相信，只要學過前端的都會。
但是你知道border-top border-bottom border-right border-left到底是怎么劃分的嗎？？反正我之前是不知道的,下面我們來看看。
#demo{
width:100px;
height:100px;
border: 20px solid;
border-color: red blue red blue;
}
從圖中我們可以看到每個border都是一個梯形，這并不像我之前以為的矩形。
接下來讓我們，我們把div元素的寬變?yōu)?,這種情況下border又會是怎么變化的呢？（從圖中我們可以每個border都是一個梯形，其中梯形的上底邊等于div的width。為了把梯形變?yōu)槿切?，我們就要縮小div的width。）
#demo{
width:0px;
height:0px;
border: 40px solid;
border-color: red blue red blue;
}
在這種情況下，4個梯形變成了4個個三角形。那么到這里我們也就知道了如何使用CSS畫三角形了。
#demo{
width:0px;
height:0px;
border:40px solid transparent;
border-bottom:80px solid red;
}
我們把其他3條邊設為transparent，就會得到如圖所示的三角形。在這里border-bottom的width控制了三角形的高。
如果我們再把一條邊設為0，又會變成什么樣的呢？？
這樣我們就得到了一個直角三角形。我們使用CSS還能畫出其他的形狀，具體請參考下面的鏈接：
https://css-tricks.com/examples/ShapesOfCSS/
遇到問題，自己動手試試，就會豁然開朗的。
以下為參考資料：
https://www.zhihu.com/question/35180018
http://www.tuicool.com/articles/3eaINn
