先看看画出来的效果：
注意没有使用图片，而是在支持css3的浏览器(Firefox 3.5+, Chrome 5, and Opera 10.6)中的纯css画出来的icon效果截图，而且html代码也非常简单。
仔细观察静音的这个icon,由4部分构成，一个圆圈，一个斜线，一个正方形，一个三角形。
圆圈可以使用css3里面的圆角实现。
斜线可以是一个元素的边框，然后经过转45度得到。
正方形就不用说了。
三角形可以使用边框来实现。
如果给每个元素一个标签，可想html结构是比较复杂，幸好可以使用:before :after伪元素来实现。
代码:
<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个元素的坐标原点成容器的左中*/
.mute:before, .mute:after, .mute a:before, .mute a:after {
content: "";
position: absolute;
top: 50%;
left: 0;
}
/*.mute前面的伪元素实现圆圈*/
.mute:before{
width: 40px;
height: 40px;
border: 1px solid #C55500;
margin-top: -19px;
-webkit-border-radius: 40px;/*圆角半径为元素宽度，这样，每一个圆角成为1/4圆*/
-moz-border-radius: 40px;
border-radius: 40px;
}
/*.mute后面的伪元素实现斜线，边框旋转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的前面伪元素实现三角形*/
.mute a:before {
left: -3px;
border: 17px solid transparent;
border-right-color: #C55500;
margin-top: -16px;
background: transparent;
}
/*a后面的伪元素画一个正方形放在合适的位置*/
.mute a:after {
height: 16px;
left: 8px;
margin-top: -8px;
width: 16px;
background-color:#C55500;
}
</style>
<!-- html就这么简单 -->
<span class="mute"><a href="###">Mute</a></span>
使用css3实现的icon的最大优点在于可以自由的改变icon的颜色，而不是做很多图片，icon更像是用画笔画出来的，可控性强，易于修改和扩展。
参考资料：
更多的css icon3 demo:
http://nicolasgallagher.com/pure-css-gui-icons/demo原作者博文：
http://nicolasgallagher.com/pure-css-gui-icons/更多使用伪元素实现的特效：
http://www.haipi8.com/css/347css border的妙用：
http://www.classyuan.com/?p=252