transparent 實(shí)現(xiàn)css三角形。
div.tri{
width: 0;
height: 0;
border-top:50px solid transparent ;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid red;
}
比如上述代碼就得到了以bottom為底高為20px的紅色三角形钥顽。底的長(zhǎng)度為左右border的width之和。
只要設(shè)置其他三個(gè)方向的border的顏色為transparent,最后一個(gè)方向的為某個(gè)顏色钦幔，就可以得到以這個(gè)方向?yàn)榈浊运撸叨葹閷?duì)應(yīng)border-width的三角形了。
可以將div以中心點(diǎn)分成4個(gè)三角形奥洼，border-width分別控制三角形的高巷疼，可以通過(guò)transparent控制該方向的三角形是否顯示。
如果width和height不為0,那將會(huì)是這樣子的梯形：
