用css畫出三角形的方法介紹

看到有面試題裡會被問到如何用css畫出三角形

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

 

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

如果你將寬度調的夠大，改變不同方向的顏色，你就可以發現盒子模型的border是四個梯形一樣的線條。

這時候如果將盒子模型內部的height，width調至0px，則三角形就形成了。

border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句
border-width:15px;　　　　　　　　//border-width代表所有方向的border
border-style:solid;
border-color:transparent；

如果你看明白了原理那麼現在你應該已經可以自己寫出程式碼了。

width: 0;
    height: 0;
    border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色
    border-right: 50px solid transparent;　　　　//右边同上
    border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

上面這段程式碼可以產生一個向下的三角形。如下圖所示（為便於理解我替換了右邊的顏色）

由這個效果圖我們可以看出，要產生一個三角形我們需要三個邊框。

左右邊框的高度會決定三角形的高有多長。

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

那麼如何產生一個指向右下或左下之類的這樣的三角呢？

相信大家已經透過上面的圖看出來了。

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

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

這段程式碼就會產生一個指向左下的三角形，底和高都是100px。

還記不記得border-width。

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

以上是用css畫出三角形的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！