看到有面試題里會(huì)有問(wèn)到如何用css畫出三角形

眾所周知好多圖形都可以拆分成三角形，所以說(shuō)會(huì)了畫三角形
就可以畫出很多有意思的形狀

畫出三角形的原理是調(diào)整border（邊框）的四個(gè)方向的寬度，線條樣式以及顏色。

如果你將寬度調(diào)的足夠大，改變不同方向的顏色，你就可以發(fā)現(xiàn)盒模型的
border是四個(gè)梯形一樣的線條。

這個(gè)時(shí)候如果將盒模型內(nèi)部的height，width調(diào)為0px，則三角形就形成了。

1 border:100px solid transparent 　　//邊框100px，實(shí)線，透明顏色，下面三行代碼等同于此句 
2 border-width:15px;　　　　　　　　//border-width代表所有方向的border 
3 border-style:solid; 
4 border-color:transparent；

如果你看明白了原理那么現(xiàn)在你應(yīng)該已經(jīng)可以自己寫出代碼了。

1     width: 0; 
2     height: 0; 
3     border-left: 50px solid transparent;　　　　//左邊寬度50px，實(shí)線，透明顏色 
4     border-right: 50px solid transparent;　　　　//右邊同上 
5     border-top: 100px solid red;　　　　　　　　//上邊寬度100px，實(shí)線，紅色

上面這段代碼可以生成一個(gè)向下的三角形。如下圖所示（為便于理解我替換了右邊的顏色）

由這個(gè)效果圖我們可以看出，要生成一個(gè)三角形我們需要三條邊框。

左右邊框的高度會(huì)決定三角形的高有多長(zhǎng)。

三角形高度則由邊框自己的寬度決定

那么如何生成一個(gè)指向右下或者左下之類的這樣的三角呢？

相信大家已經(jīng)通過(guò)上面的圖看出來(lái)了。

我們只需要兩條邊框就夠了。

1     width: 0; 
2     height: 0; 
3     border-top: 100px solid red; 
4     border-right: 100px solid transparent;

這段代碼就會(huì)生成一個(gè)指向左下的三角形，底和高都是100px。

還記不記得border-width。

它可以用一句代碼定義四條邊框的寬度。