CSS實(shí)現(xiàn)三角形

發(fā)布時(shí)間：2020-01-03 09:52:24

發(fā)布者：等等

瀏覽量:

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

將一個(gè)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;
}

　將一個(gè)div的border都設(shè)置成50px粗，并且不同顏色，結(jié)果如下圖所示：

css實(shí)現(xiàn)三角形.png

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

將左右下邊框設(shè)置成transparent，就可以畫(huà)出一個(gè)三角形

.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;
}
/*下面代碼更加簡(jiǎn)潔*/
.triangle{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: black ;
}

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

css實(shí)現(xiàn)三角形2.png

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

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

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

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

css實(shí)現(xiàn)三角形3.png