除号制作css

使用 CSS 制作除号

通过 CSS 的伪元素和边框属性可以轻松实现除号效果。以下是两种常见方法：

方法一：使用伪元素和旋转

通过旋转两个伪元素（水平线）形成除号形状：

.divide-symbol {
  position: relative;
  width: 30px;
  height: 30px;
}
.divide-symbol::before,
.divide-symbol::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: black;
  top: 50%;
}
.divide-symbol::before {
  transform: translateY(-50%) rotate(45deg);
}
.divide-symbol::after {
  transform: translateY(-50%) rotate(-45deg);
}

方法二：使用边框和旋转

通过单元素旋转实现更简洁的除号：

.divide-symbol {
  width: 30px;
  height: 4px;
  background-color: black;
  transform: rotate(45deg);
  position: relative;
}
.divide-symbol::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transform: rotate(90deg);
}

调整样式参数

• 修改 width 和 height 可控制除号大小
• 调整 background-color 可改变颜色
• 修改 rotate 角度值可改变倾斜程度（标准除号为 45°/-45°）

动画效果示例

为除号添加悬停旋转动画：

.divide-symbol {
  transition: transform 0.3s ease;
}
.divide-symbol:hover {
  transform: rotate(135deg);
}

这些方法均无需使用图片或特殊字体，纯 CSS 实现且支持响应式调整。