CSS實現三角形

將一個div的寬度和高度設置為0，然后設置邊框樣式

.triangle{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid blue;
}

　　將一個div的border都設置成50px粗，並且不同顏色，結果如下圖所示：

 

　　把邊框寬度設置成50px，計算機處理時，在邊框交接處，一邊占用一半的面積。

將左右下邊框設置成transparent，就可以畫出一個三角形

.triangle{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
}
/*下面代碼更加簡潔*/
.triangle{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: black ;
}

　　結果如下圖所示：

將下邊框的長度設置為0，實現一個最小空間的三角形

　　上面產生的三角形，實質上占位還是一個正方形，所以我們應該將這個三角形占用的空間盡可能縮小。不設置下邊框

.triangle{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

 　　這樣就可以實現高度為50px，寬度為100px的三角形，結果如下圖所示：

 

 同理，可以畫出各種三角形：