施用css3画"静音"icon

2012-10-13

使用css3画静音icon先看看画出来的效果：注意没有使用图片，而是在支持css3的浏览器(Firefox 3.5+, Chrome

使用css3画"静音"icon
先看看画出来的效果：

注意没有使用图片，而是在支持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>

<span class="mute">Mute</span>
使用css3实现的icon的最大优点在于可以自由的改变icon的颜色，而不是做很多图片，icon更像是用画笔画出来的，可控性强，易于修改和扩展。

热点排行

CSS

施用css3画"静音"icon