css如何制作文件图标
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>