三角形屬於常見的幾何圖形，在網頁設計中應用較為廣泛。在網頁程式設計中除了採用圖片來實現前端展現外，純CSS也可以實現三角形繪製。

1、基於border-width方案

基於border-width繪製三角形是“一門傳統手藝”，由於該屬性瀏覽器的支援性非常好，幾乎沒有相容性問題，主流的三角形繪製方案都是採用基於border-width屬性來實現的。在介紹border-width方案前，我們先來了解一下通過其繪製三角形的原理。

通過border屬性來繪製由四個不同顏色的三角形組成的矩形

        div {
            width: 0;
            height: 0;
            border-top-width: 50px;
            border-right-width: 100px;
            border-bottom-width: 200px;
            border-left-width: 150px;
            border-color:green blue yellow  red;
            border-style:solid;
        }

在塊級盒中預設box-sizing:content-box; 以及width和height屬性都為0的情況下，相鄰兩邊框交叉區域渲染的範圍為各自邊框內外邊緣交匯點所組成的線段為分界點進行渲染。

對上面瀏覽器渲染的圖形區域性進行放大，如上圖所示，O點即為上邊框與左邊框的內邊緣交匯點，瀏覽器在渲染時區域的分佈情況。50px為上邊框的寬度，150px為左邊框的寬度值。

1.1繪製直角三角形

當僅剩兩個相鄰邊框時，就成為由兩個三角形構成的矩形：

        div {
            width: 0;
            height: 0;
            border-top-width: 50px;
            border-left-width: 100px;
            border-color: red blue;
            border-style: solid;      
        }

所以繪製直角三角形可以通過將一邊的顏色值改為透明色來實現：

      div {
            width: 0;
            height: 0;
            border-top-width: 50px;
            border-left-width: 100px;
            border-color: transparent blue;
            border-style: solid;
          
        }

1.2繪製等腰三角形

等腰三角形可以視為兩個相等直角三角形的組合形狀，因此繪製等腰三角形也可以通過再在下方繪製一個相等的直角三角形。通過對上面的程式碼進行少許改動即可。

    div {
            width: 0;
            height: 0;
            border-top-width: 50px;
            border-left-width: 100px;
            border-bottom-width: 50px;
            border-color: transparent blue;
            border-style: solid; 
        }

1.3繪製已知三邊的任意三角形

前面繪製的三角形都是較為特殊的三角形，對於任意三角形CSS同樣可以實現。不過由於CSS長度只支援浮點數，不支援無理數數值，只能採用近似值進行模擬。這裡需要初中的海倫公式以及勾股定理進行計算。

例如，如何通過CCS繪製三邊分別為60px、70px、80px的三角形？

轉換為數學模型，在矩形AHGB中，已知C位於線段HG上，CE與直線AB垂直，並且三角形ABC中三邊長分別為60、70、80，求線段HC、CG的長度。

根據題意，HC=AE,CG=EB,該題即已知三角三邊，求垂線分隔邊的兩段線段長度。

根據海倫公式，三角形ABC的面積：

其中p為三角形周長的一半。

而三角形計算面積公式，可得三角形ABC的面積：

兩種方式計算的面積相等，1=2代入數值並計算

根據勾股定理，三角形AEC中AE的值

代入數值有AE=17.5

EB=AB-AE=42.5

AE即上邊框寬度，EB為下邊框寬度，h為左邊框寬度（h約等於67.777），那麼純CSS繪製一個三邊長分別為60px、70px、80px的三角形程式碼：

        div {
            width: 0;
            height: 0;
            border-top-width: 17.5px;
            border-bottom-width: 42.5px;
            border-left-width: 67.777px;
            border-color:transparent green;
            border-style:solid;
        }

實現效果：

免費幾何圖形軟體Geogebra可以自動計算相應的值，可以通過在Geogebra中繪製三角形，直接獲得相應的邊長，省略繁瑣的人工計算過程。

2、基於線性漸變方案

2.1繪製直角三角形

直角三角形中，一邊長度為100px，另一邊長度為50px，那麼acttan0.5= 26.565°。

    div {
        width: 100px;
        height: 50px;
        background:linear-gradient(26.565deg,blue 50%,transparent 0);
     }

Point：線性漸變中角度的設定建議參考閱讀：CSS3之線性漸變。

2.2繪製等腰三角形

繪製等腰三角形可以視為兩個相等直角三角形的組合形狀。兩個直角邊分為別100px、50px的直角三角形組合為底邊長100px，高為100px的等腰三角形。通過兩個漸變以及背景影象大小、位置進行設定。

        div {
            width: 100px;
            height: 100px;
            background:linear-gradient(26.565deg,blue 50%,transparent 0),
            linear-gradient(153.435deg,blue 50%,transparent 0);
            background-size:100% 50%;
            background-repeat:no-repeat;
            background-position:0 0,0 100%;   
        }

2.3繪製任意三角形

繪製一個邊長分別為60px、70px、80px的三角形。

和border-width方案繪製任意三角形的思路一樣，通過兩個直角三角形組合來形成滿足要求的三角形圖案。

通過兩個線性漸變組合程式碼：

        div {
            width: 67.777px;
            height: 60px;
            background:linear-gradient(14.47750737deg,green 50%,transparent 0),
            linear-gradient(147.9102316100deg,green 50%,transparent 0);
            background-size:100% 17.5px,100% 42.5px;
            background-repeat:no-repeat;
            background-position:0 0,0 100%;  
        }

由於背景大小設定含有小數值，不同使用者代理對於小數處理的差異性會導致在實際應用中出現相容性問題，部分使用者代理中顯示出現白線。這種情況可以在背景大小屬性值設定時向上取整，來消除白線：background-size:100%17.5px,100%43px;。不過向上取整在區域性放大時，會定點出現銜接處的超出情況。

C點銜接處超出情況

3、基於clip-path方案

剪下路徑（clip-path）可以輕鬆剪下任意形狀，是非常方便的圖案設計屬性。使用該屬性可以擺脫使用border-width或線性漸變過程中可能涉及的繁瑣數學計算過程。

3.1繪製直角三角形

        div {
            width: 100px;
            height: 50px;
            background:blue;
            clip-path:polygon(0 0,100% 100%,0 100%);
        }

3.2繪製等腰三角形

        div {
            width: 100px;
            height: 100px;
            background:blue;
            clip-path:polygon(0 0,100% 50%,0 100%);
        }

3.3繪製任意三角形

繪製一個邊長分別為60px、70px、80px的三角形。採用剪下路徑來構建任意三角形，仍然需要構建數學模型求出相應線段長度以及座標值點。

   div {
            width: 67.777px;
            height: 60px;
            background:green;
            clip-path:polygon(0 0,100% 17.5px,0 100%);
        }