【CSS】组装图标
一般情况下，图标总是事先做成图片然后直接拿来调用就行了。但是碰到一个状况需要做3分比例饼图，采用3种颜色标识不同内容在总体所占的比例，简单起见，所占比例为1/8的倍数。效果如下：
这样把每一个比例单独做个图，未免工作量过大，没算错的话需要做45个图；当然你可能会想到用程序去生成图，但也要会图像编程才行，这里先不考虑。
我的方法是把图分解，做一张灰圆，然后分别做8个不同8分比例的浅蓝、深蓝扇形，这个做起来还是比较方便的。做好后利用雪碧工具把图拼合成一张，如下：
利用gif图片的透明性进行CSS组装，如下
提示：你可以先修改部分代码再运行。
源码下载：CSS拼装图标源码
参考文章： Tencent ISD Webteam《由黄钻等级图标处理引发的思考》
近期评论