用纯CSS画圆形，定位图形，无需图片，背景颜色可变，大小可变
工具/原料
HTML代码，CSS代码
方法/步骤
1
HTML制作，早期用背景图片制作圆形，定位图标等是常用方法，优点是可以做到比较精美，但缺点也是比较明显，更改图形大小，需要重做图片，更改颜色也要重做图片。图片效果如图，精美，但制作麻烦，修改大小，颜色也麻烦
2
现在，较为技术一点的做法，就是用纯CSS去制作各类图形，优点就是大小，颜色可以随意改动，只需要简单的改一二行代码，先通过，HTML, CSS来制作一个圆形，代码，效果，如图：
3
制作另一个圆形，带外边框，代码，效果，如图：
4
然后，用HTML, CSS来制作一个三角形，代码，效果，如图：
5
通过CSS， 把三个图形，叠合在一起，这里关键是用到CSS的定位，完整代码如图：
6
最终效果如图：通过各类CSS图形的组合，我们可以得到各式各样好看的图形，图标，是我们站点制作的新方法，大家可以发挥自己的创作力，尝试一下。
注意事项
1
制作圆形的 border-radius 大小要结合圆形的长度，宽度，否则有可能会变成椭圆形：）
2
制作三角形的边框border大小要一致，否则有可能会变成长长的三角形：）
上一篇：山地探险标志设计
下一篇：WIN7如何自由排列桌面图标