使用纯css实现编辑/修改图标，比图标更炫更轻

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

上一篇文章实现了使用纯css实现保存按钮。这里再介绍下css实现图标的背景：

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

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

css样式代码：

<style>
.edit-icon {
        display:inline-block;
	position: relative;
	width: 100px;
	height: 100px;
	background: white;
	border: 4px solid #bdc3c7;
	border-radius: 8px;
	overflow: hidden;
}

.edit-icon::before {
	content: '';
	position: absolute;
	width: 100px;
	height: 22px;

	background-image:
		linear-gradient(#E74C3C, #E74C3C),
		linear-gradient(black, black),
		linear-gradient(#F3D3A3, #F3D3A3),
		linear-gradient(#5D9CEC, #5D9CEC);           
	background-repeat: no-repeat;

	background-size:
		15% 100%,
		6% 50%,
		25% 100%,
		100% 100%;

	background-position:
		left center,
		right 15%,
		right center,
		left center;

	clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

	/* Position the element's top-left corner at the parent's center */
	top: 50%;
	left: 50%;
	/* Translate the element's center to the parent's center, then rotate */
	transform: translate(-50%, -50%) rotate(135deg);
}
</style>

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

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

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