css斜线制作

使用伪元素和旋转制作斜线

通过伪元素 ::before 或 ::after 结合 transform: rotate() 实现斜线效果。设置宽度、高度和背景色后，通过旋转角度（如 45deg）生成斜线。

.slash {
  position: relative;
  width: 100px;
  height: 100px;
}
.slash::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #000;
  transform: rotate(45deg);
}

使用线性渐变背景

通过 linear-gradient 创建斜线背景。调整角度参数（如 45deg）和颜色断点控制斜线方向和样式。

.slash-bg {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, transparent 49%, #000 50%, transparent 51%);
}

使用边框和旋转

结合透明边框与旋转，利用 border 和 transform 生成斜线。适用于对角线效果。

.slash-border {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-bottom: 50px solid #000;
  transform: rotate(45deg);
}

SVG 内联实现斜线

通过内联 SVG 的 <line> 元素绘制斜线，可精确控制起点和终点坐标。

<div class="svg-slash">
  <svg width="100" height="100">
    <line x1="0" y1="100" x2="100" y2="0" stroke="#000" stroke-width="2" />
  </svg>
</div>

斜线分隔文本

利用伪元素为文本添加斜线分隔符，常用于标题或导航栏。

.text-slash::after {
  content: "/";
  margin: 0 10px;
  color: #999;
}