先看看畫出來(lái)的效果：
注意沒(méi)有使用圖片，而是在支持css3的瀏覽器(Firefox 3.5+, Chrome 5, and Opera 10.6)中的純css畫出來(lái)的icon效果截圖，而且html代碼也非常簡(jiǎn)單。
仔細(xì)觀察靜音的這個(gè)icon,由4部分構(gòu)成，一個(gè)圓圈，一個(gè)斜線，一個(gè)正方形，一個(gè)三角形。
圓圈可以使用css3里面的圓角實(shí)現(xiàn)。
斜線可以是一個(gè)元素的邊框，然后經(jīng)過(guò)轉(zhuǎn)45度得到。
正方形就不用說(shuō)了。
三角形可以使用邊框來(lái)實(shí)現(xiàn)。
如果給每個(gè)元素一個(gè)標(biāo)簽，可想html結(jié)構(gòu)是比較復(fù)雜，幸好可以使用:before :after偽元素來(lái)實(shí)現(xiàn)。
代碼:
<style type="text/css">
.mute{font: 50px/1.4 "Microsoft YaHei";position:relative;z-index:1;overflow:hidden; padding-left:50px;}
.mute a{text-decoration:none; color:#444; font-weight:bold;}
/*將4個(gè)元素的坐標(biāo)原點(diǎn)成容器的左中*/
.mute:before, .mute:after, .mute a:before, .mute a:after {
content: "";
position: absolute;
top: 50%;
left: 0;
}
/*.mute前面的偽元素實(shí)現(xiàn)圓圈*/
.mute:before{
width: 40px;
height: 40px;
border: 1px solid #C55500;
margin-top: -19px;
-webkit-border-radius: 40px;/*圓角半徑為元素寬度，這樣，每一個(gè)圓角成為1/4圓*/
-moz-border-radius: 40px;
border-radius: 40px;
}
/*.mute后面的偽元素實(shí)現(xiàn)斜線，邊框旋轉(zhuǎn)45度得到*/
.mute:after {
width: 40px;
border-top: 1px solid #C55500;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*a的前面?zhèn)卧貙?shí)現(xiàn)三角形*/
.mute a:before {
left: -3px;
border: 17px solid transparent;
border-right-color: #C55500;
margin-top: -16px;
background: transparent;
}
/*a后面的偽元素畫一個(gè)正方形放在合適的位置*/
.mute a:after {
height: 16px;
left: 8px;
margin-top: -8px;
width: 16px;
background-color:#C55500;
}
</style>
<!-- html就這么簡(jiǎn)單 -->
<span class="mute"><a href="###">Mute</a></span>
使用css3實(shí)現(xiàn)的icon的最大優(yōu)點(diǎn)在于可以自由的改變icon的顏色，而不是做很多圖片，icon更像是用畫筆畫出來(lái)的，可控性強(qiáng)，易于修改和擴(kuò)展。
參考資料：
更多的css icon3 demo:
http://nicolasgallagher.com/pure-css-gui-icons/demo原作者博文：
http://nicolasgallagher.com/pure-css-gui-icons/更多使用偽元素實(shí)現(xiàn)的特效：
http://www.haipi8.com/css/347css border的妙用：
http://www.classyuan.com/?p=252