css写√的图标_css如何制作文件图标

所有代码。可以直接把下面的所有代码复制粘贴到新建的html文件上，保存后运行即可看到效果。

所有代码：

文件小图标

.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;

}