使用css实现文件夹图标的方法

mini云码 发布日期： 2025-11-18 18:14

上一篇文章，讨论了使用css实现保存图标。这篇文章我们来实现下使用css实现文件夹图标。

文件夹的图标，不一定是使用图片来实现，使用css实现，其实体积更小。而且放大和缩小不会影响它的分辨率。

下面来看看使用css实现文件夹图标的代码：

.folder-icon {
	position: relative;
	width: 100px;
	height: 75px;
	background-color: #f1c40f;
	border-radius: 0 8% 8% 8%;
}

     
.folder-icon::before {
	content: '';
	position: absolute;
	top: -13.33%; /* 10px / 75px */
	left: 0;
	width: 40%; /* 40px / 100px */
	height: 13.33%; /* 10px / 75px */
	background-color: #f1c40f;
	border-radius: 8% 8% 0 0;
}

然后再html理引用即可：

<div class="folder-icon"></div>