1、打开前端开发工具，新建一个html文件。如图
2、在html文件上找到<body>,在<body>里面创建一个<div>标签，然后给这个标签添加一个class类（案例中类为：file-icon）。如图：代码：<div class="file-icon"></div>
3、找到<title>，在<title>标签后面创建一个<style>标签，然后在<style>标签中设置class类的样式，制作一个缺少有边框的矩形。画一个矩形框，给这个矩形上、下、左这三条边框设置颜色和大小。如图：代码：<style type="text/css"> .file-icon{ width: 3.2em; height: 5em; border-top: 0.4em solid #333; border-bottom:0.4em solid #333; border-left:0.4em solid #333; margin: 50px auto; position: relative; }</style>
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文件上，保存后运行即可看到效果。所有代码：<!DOCTYPE html><稆糨孝汶;html> <head> <meta charset="UTF-8"> <title>文件小图标</title> <style type="text/css"> .file-icon{ width: 3.2em; height: 5em; border-top: 0.4em solid #333; border-bottom:0.4em solid #333; border-left:0.4em solid #333; margin: 50px auto; position: relative; } .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: ""; } .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; } </style> </head> <body> <div class="file-icon"></div> </body></html>