css如何制作斜线

使用 CSS 制作斜线的方法

使用 linear-gradient 背景渐变

通过 CSS 的 background 属性结合 linear-gradient 可以创建斜线效果。调整角度参数（如 45deg）可改变斜线方向。

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

使用伪元素和 transform

通过伪元素（::before 或 ::after）结合 transform: rotate() 实现斜线。适用于需要精确控制斜线位置和尺寸的场景。

.element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
  transform: rotate(30deg);
  transform-origin: left center;
}

使用 SVG 内联

通过内联 SVG 的 <line> 元素绘制斜线，适合复杂路径或需要动态控制的场景。

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

使用边框和旋转

通过组合元素的边框和旋转，创建对角线效果。例如，利用零宽高的元素和边框生成斜线。

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

选择建议

• 简单斜线：优先使用 linear-gradient，代码简洁且易于调整角度。
• 精确控制：伪元素 + transform 适合需要定位的场景。
• 复杂路径：SVG 提供更灵活的路径绘制能力。
• 边框斜线：适用于特定形状（如三角形）的斜切效果。