早上好，歡迎觀看濟(jì)南軟件開發(fā)的網(wǎng)站，我們是文匯軟件，專業(yè)app開發(fā),系統(tǒng)開發(fā),微信小程序開發(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é)果如下圖所示：
把邊框?qū)挾仍O(shè)置成50px，計(jì)算機(jī)處理時(shí)，在邊框交接處，一邊占用一半的面積。
將左右下邊框設(shè)置成transparent，就可以畫出一個(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é)果如下圖所示：
將下邊框的長(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é)果如下圖所示：
同理，可以畫出各種三角形：
分享完畢，感謝大家觀看濟(jì)南app開發(fā)的網(wǎng)站，再見！
