看到有面試題里會有問到如何用css畫出三角形
眾所周知好多圖形都可以拆分成三角形，所以說會了畫三角形
就可以畫出很多有意思的形狀
畫出三角形的原理是調整border（邊框）的四個方向的寬度，線條樣式以及顏色。
如果你將寬度調的足夠大，改變不同方向的顏色，你就可以發現盒模型的
border是四個梯形一樣的線條。
這個時候如果將盒模型內部的height，width調為0px，則三角形就形成了。
1 border:100px solid transparent //邊框100px，實線，透明顏色，下面三行代碼等同于此句 2 border-width:15px; //border-width代表所有方向的border 3 border-style:solid; 4 border-color:transparent；
如果你看明白了原理那么現在你應該已經可以自己寫出代碼了。
1 width: 0; 2 height: 0; 3 border-left: 50px solid transparent; //左邊寬度50px，實線，透明顏色 4 border-right: 50px solid transparent; //右邊同上 5 border-top: 100px solid red; //上邊寬度100px，實線，紅色
上面這段代碼可以生成一個向下的三角形。如下圖所示（為便于理解我替換了右邊的顏色）
由這個效果圖我們可以看出，要生成一個三角形我們需要三條邊框。
左右邊框的高度會決定三角形的高有多長。
三角形高度則由邊框自己的寬度決定
那么如何生成一個指向右下或者左下之類的這樣的三角呢？
相信大家已經通過上面的圖看出來了。
我們只需要兩條邊框就夠了。
1 width: 0; 2 height: 0; 3 border-top: 100px solid red; 4 border-right: 100px solid transparent;
這段代碼就會生成一個指向左下的三角形，底和高都是100px。
還記不記得border-width。
它可以用一句代碼定義四條邊框的寬度。
【 微信掃一掃 】
