纯CSS制作圆形,定位图标

 时间:2026-04-23 01:24:49

1、HTML制作,早期用背景图片制作圆形,定位图标等是常用方法,优点是可以做到比较精美,但缺点也是比较明显,更改图形大小,需要重做图片,更改颜色也要重做图片。图片效果如图,精美,但制作麻烦,修改大小,颜色也麻烦

纯CSS制作圆形,定位图标

2、现在,较为技术一点的做法,就是用纯CSS去制作各类图形,优点就是大小,颜色可以随意改动,只需要简单的改一二行代码,先通过,HTML, CSS来制作一个圆形,代码,效果,如图:

纯CSS制作圆形,定位图标

纯CSS制作圆形,定位图标

3、制作另一个圆形,带外边框,代码,效果,如图:

纯CSS制作圆形,定位图标

纯CSS制作圆形,定位图标

4、然后,用HTML, CSS来制作一个三角形,代码,效果,如图:

纯CSS制作圆形,定位图标

纯CSS制作圆形,定位图标

5、通过CSS, 把三个图形,叠合在一起,这里关键是用到CSS的定位,完整代码如图:

纯CSS制作圆形,定位图标

纯CSS制作圆形,定位图标

6、最终效果如图:

通过各类CSS图形的组合,我们可以得到各式各样好看的图形,图标,是我们站点制作的新方法,大家可以发挥自己的创作力,尝试一下。

纯CSS制作圆形,定位图标

  • Ps如何使用渐变工具和油漆桶工具
  • PS中如何改变某样物体的颜色
  • PS怎么找到图片中的颜色
  • ps打字模糊怎么办
  • ps如何把图片改成单一颜色的效果。
  • 热门搜索
    moncler怎么读 电脑开机密码怎么改 可可粉怎么吃 铁树叶子发黄怎么办 ps怎么添加蒙版 脸上长红痘痘怎么办 微信怎么拍一拍怎么加文字 小孩半夜发烧怎么办 汽车购置税怎么计算 lol怎么看隐藏分