网页开发过程中,为了增加页面的用户体验,增加页面的美观,常常会添加一个小图标。小图标的制作方法有很,最常用的就是使用Sprite背景图片实现一个图标,Sprite背景图片实现一个图标会存在一个弊端,修改图标的颜色或大小时,需要修改Sprite背景图片图。而CSS3生成的小图标在修改颜色或大小时只需要修改css样式即可,从而节省了不少时间。思路: 文件图标 = 一个缺少右边框的矩形 + 一个缺少左边框的矩形 + 一个三角型。
方法/步骤
1
打开前端开发工具,新建一个html文件。如图
2
在html文件上找到
,在里面创建一个标签,然后给这个标签添加一个class类(案例中类为:file-icon)。如图:代码:
3,在标签后面创建一个
找到
4
保存html文件后使用浏览器打开,即可看到缺少有边框的矩形。如图
5
使用before伪样式设置一个缺少左边框的矩形,这个矩形要和上面的矩形底部对齐,并且高度小于上面的矩形。如图:代码:.file-icon:before{ border-right: 0.4em solid #333; border-bottom: 0.4em solid #333; width: 1em; height: 4em; position: absolute; right: -1.3em; bottom: -0.4em; content: ''; }
6
保存html文件后使用浏览器打开,即可看到效果。如图
7
最后使用after伪样式制作一个三角形,这个三角形用于连接第一个和第二个矩形空白处,这样就可以看到一个文件图标了。如图:代码:.file-icon:after{ position: absolute; top: -0.4em; right: -1.3em; content: ''; border-bottom: 1.4em solid #333; border-right: 1.4em solid transparent; width: 0; height: 0; }
8
保存html文件后使用浏览器打开,即可看到效果。如图:
9文件小图标
所有代码。可以直接把下面的所有代码复制粘贴到新建的html文件上,保存后运行即可看到效果。所有代码:
下一篇:css制作定位图标
推荐信息
- 1
用css画三角形
- 2
怎么用CSS实现一 个三角形
- 3
怎么利用CSS3绘制三角形
- 4
网页如何使用HTML+CSS实现三角形
- 5
纯CSS实现三角形图标
- 6
CSS如何用border画三角形
- 7
HTML5,CSS3学习之路(一)用纯css3绘制三角形
- 8
无需图片纯CSS三角形,大小,颜色可变
- 9
如何用CSS制作一个三角形图形
- 10
CSS如何实现一个三角形呢?
- 11
css如何制作一个三角形
- 12
css3怎样写三角形
- 13
用CSS代码绘制精美双色三角形的技巧
- 14
如何用css实现弧度圆角?三角形以及圆形
- 15
用CSS代码在网页上绘制漂亮的三角标记
- 16
css如何制作带三角的提示框
- 17
CSS3制作各种形状图像
- 18
CSS+HTML实现图片角标或者效果
- 19
如何使用CSS font-variant 属性
- 20
css如何制作菱形
- 21
DIV+CSS基础知识之HTML标签元素(下)
- 22
怎么样用电脑玩手游大航海之路
- 23
家长如何教育初中生
- 24
上古世纪赚钱也就是金币的方法
- 25
墨菲定律是什么意思?
- 26
ppt怎么制作旋转的八卦太极图动画效果
- 27
华为荣耀畅玩7X分屏怎么操作
- 28
probux赚美金攻略
- 29
music是什么意思
- 30
京剧里各色脸谱分别代表什么意思?
- 31
天天富翁刷钻石攻略
- 32
盘他是什么梗?
- 33
弱视是什么意思?
- 34
iPhone/iPad版《光辉之城》中期进阶攻略
- 35
教你如何在网上赚钱:[1]打码兼职
- 36
防骗数据库-如防骗要点汇总:[1]网上如何防骗
- 37
移动电子商务的6个成功秘密
- 38
自鸽选手是什么梗,代表什么意思
- 39
生活中的元素——钽
- 40
大话西游手游攻略之商人篇