早上好，歡迎觀看濟南軟件開發(fā)的網(wǎng)站，我們是文匯軟件，專業(yè)app開發(fā),系統(tǒng)開發(fā),微信小程序開發(fā)。
今天給大家分享一下用css實現(xiàn)三角形。

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

.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都設(shè)置成50px粗，并且不同顏色，結(jié)果如下圖所示：

把邊框?qū)挾仍O(shè)置成50px，計算機處理時，在邊框交接處，一邊占用一半的面積。

將左右下邊框設(shè)置成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 ;
}

結(jié)果如下圖所示：

將下邊框的長度設(shè)置為0，實現(xiàn)一個最小空間的三角形

　　上面產(chǎn)生的三角形，實質(zhì)上占位還是一個正方形，所以我們應(yīng)該將這個三角形占用的空間盡可能縮小。不設(shè)置下邊

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

這樣就可以實現(xiàn)高度為50px，寬度為100px的三角形，結(jié)果如下圖所示：

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

分享完畢，感謝大家觀看濟南app開發(fā)的網(wǎng)站，再見！