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的三角形，結果以下圖所示：

 

 同理，能夠畫出各類三角形：