当前位置：首页 > CSS

除号制作css

2026-01-28 10:38:18CSS

使用伪元素创建除号

通过CSS的伪元素::before或::after结合content属性生成除号符号。以下示例使用Unicode字符实现水平线加点的效果：

.divide-symbol::before {
  content: "÷";
  font-size: 24px;
}

通过边框和定位实现

利用绝对定位和边框绘制两条交叉线模拟除号效果：

除号制作css

.divide-box {
  position: relative;
  width: 20px;
  height: 20px;
}
.divide-box::before, 
.divide-box::after {
  content: "";
  position: absolute;
  background-color: black;
}
.divide-box::before {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.divide-box::after {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

SVG内联方案

使用SVG直接绘制精确的除号图形：

除号制作css

<svg viewBox="0 0 20 20" width="20" height="20">
  <line x1="2" y1="10" x2="18" y2="10" stroke="black" stroke-width="2"/>
  <circle cx="10" cy="10" r="3" fill="black"/>
</svg>

背景渐变实现

通过CSS线性渐变创建水平线，配合圆形元素组合成除号：

.divide-bg {
  width: 30px;
  height: 30px;
  background: 
    linear-gradient(black, black) center/80% 2px no-repeat,
    radial-gradient(circle, black 30%, transparent 30%);
}

旋转叠加法

先创建加号样式，然后旋转45度形成斜线效果：

.rotated-divide {
  position: relative;
  width: 20px;
  height: 20px;
}
.rotated-divide::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  background: black;
  transform: translateY(-50%) rotate(45deg);
}

每种方法适用于不同场景，伪元素方案适合简单符号插入，SVG方案提供最佳可缩放性，而旋转叠加法则适合需要动态效果的情况。可根据实际项目需求选择最合适的实现方式。