使用纯css样式实现保存图标例子

mini云码 发布日期： 2025-11-10 15:01

使用图片形式的图标，假如图标多了，会增加网站文件的总大小，特别是小程序对应用体积有要求的一些场景。有一些图标，是可以使用纯css样式代替的，比如保存按钮，就可以使用纯css样式代替。

比如下图这个样式图标，就可以使用纯css样式实现：

css样式代码：

<style>
.save-icon {
	width: 100px;
	height: 100px;
        display:inline-block;
	background-image:
		linear-gradient(#bdc3c7, #bdc3c7), 
		linear-gradient(#ecf0f1, #ecf0f1),
		linear-gradient(#3498db, #3498db); 

	background-repeat: no-repeat;

	background-size:
		70% 35%, 
		80% 40%, 
		100% 100%;

	background-position:
		bottom center, 
		center 15%,  
		0 0;  
	clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 0% 100%);
}
</style>

然后页面的div引用它就行了

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

上面的样式，也可以修改width和height和背景颜色。