每次編寫(xiě)html的時(shí)候，遇到三角圖標(biāo)都是插圖進(jìn)去，現(xiàn)在發(fā)現(xiàn)css也可以實(shí)現(xiàn)這種功能，操作如下：
通過(guò)設(shè)置div的border屬性，來(lái)實(shí)現(xiàn)！
將div的height和width屬性分別設(shè)置為0px，將4邊的border值設(shè)置為一樣的寬度，通過(guò)調(diào)節(jié)邊框的顏色課看到效果。
<style> div{height: 0px;width: 0px; border-top: 20px solid red; border-left: 20px solid blue; border-right: 20px solid gray; border-bottom: 20px solid pink; } </style> </head> <body> <div></div> </body>
即可得到一個(gè)由4個(gè)三角形組成的正方形。如下圖：
接下去，只要設(shè)置將另外3邊的顏色去掉就可以得到三角形，此時(shí)設(shè)置border-color為transparent，此時(shí)就能得到三角形。
div{height: 0px;width: 0px;
border-top: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
}得到如下圖：
另外，transparent為顏色值，等同于rgba(0,0,0,0)，透明度為0。然而在IE6中不支持，會(huì)默認(rèn)顯示如下圖：
【 微信掃一掃 】
