如何使用CSS的div替换带圆圈的SVG叉号元素？

云上老周

2026-8-16

纯CSS替换SVG带圆圈叉号的实现方案

需求说明

将现有代码中通过SVG实现的带圆圈叉号，替换为纯CSS的div元素实现。

1. 简化HTML结构

直接移除原.exit容器内的所有SVG代码，保留空div即可：

<div class="exit"></div>

2. 修改CSS样式

保留原有的布局定位逻辑，用CSS伪元素实现叉号效果，完美匹配原SVG的视觉表现：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.exit {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border-radius: 50%;
  /* 还原原SVG的红色圆形背景 */
  background-color: red;
}

/* 用伪元素实现白色叉号 */
.exit::before,
.exit::after {
  content: '';
  position: absolute;
  width: 33px; /* 约为容器宽度的70%，匹配原SVG叉号比例 */
  height: 2px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.exit::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}