DIV CSS 佈局教程網

看到有面試題裡會有問到如何用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。

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

轉載請聯系