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

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

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

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

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

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

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

width: 0;
 height: 0;
 border-left: 50px solid transparent;　　　　//左邊寬度50px，實線，透明顏色
 border-right: 50px solid transparent;　　　　//右邊同上
 border-top: 100px solid red;　　　　　　　　//上邊寬度100px，實線，紅色

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

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

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

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

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

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

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

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

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

還記不記得border-width。

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com