css畫(huà)三角形原理 如何用css制作小三角圖標(biāo)?
如何用css制作小三角圖標(biāo)?css制作三角圖標(biāo)像以上的三角形小圖標(biāo),實(shí)現(xiàn)的方法有很多種,大部分人會(huì)使用圖片來(lái)實(shí)現(xiàn),其實(shí)純css也可以實(shí)現(xiàn)的,方法很簡(jiǎn)單。下面是正方形的實(shí)現(xiàn)方法,四邊給個(gè)border,然
如何用css制作小三角圖標(biāo)?
css制作三角圖標(biāo)像以上的三角形小圖標(biāo),實(shí)現(xiàn)的方法有很多種,大部分人會(huì)使用圖片來(lái)實(shí)現(xiàn),其實(shí)純css也可以實(shí)現(xiàn)的,方法很簡(jiǎn)單。
下面是正方形的實(shí)現(xiàn)方法,四邊給個(gè)border,然后設(shè)置下顏色就可以了,記得加上overflow:hidden,不然IE6下是有問(wèn)題的.Box { width:0 height:0 overflow:hidden border-left:40px solid #00F border-bottom:40px solid #F00 border-right:40px solid #F90 border-top:40px solid #0F0 }三角形的實(shí)現(xiàn)方法是把其他三邊的顏色設(shè)為一樣就可以了.Box { width:0 height:0 overflow:hidden border-left:40px solid #00F border-bottom:40px solid #FFF border-right:40px solid #FFF border-top:40px solid #FFF }css這種三角文字排列方式怎么實(shí)現(xiàn)?
用一個(gè)白色的,邊沿虛化的,透明格式(如PNG)的直角三角形圖片覆蓋在文字上面即可。這是最簡(jiǎn)單的方法。也可以利用css3的底色漸變方式,在文字上面覆蓋一個(gè)空白層,然后填充一個(gè)漸變的底色即可,比如:<div style="position:relative width:500px height:250px"><script>for(var i=0i<60i )document.write("css問(wèn)題咨詢(xún)")</script><div style="position:absolute left:0 top:0 width:100% height:100% background: linear-gradient(158deg, rgba(255,255,255,0) 44%,rgba(255,255,255,1) 46%)"></div></div>