css制作斜线

使用 CSS 制作斜线的方法

通过 border 和 transform 实现

利用元素的边框和旋转效果可以创建斜线。设置元素的宽度和高度为0，通过边框属性生成三角形，再旋转45度形成斜线。

.diagonal-line {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-bottom: 50px solid black;
  transform: rotate(45deg);
}

使用 linear-gradient 背景

通过线性渐变背景可以模拟斜线效果。设置渐变角度为45度，从透明到颜色再到透明，形成一条斜线。

.diagonal-line {
  height: 2px;
  background: linear-gradient(45deg, transparent, black, transparent);
}

利用伪元素和 transform

通过伪元素生成一个矩形，然后旋转形成斜线。调整宽度、高度和旋转角度可以控制斜线的方向和长度。

.diagonal-line {
  position: relative;
  width: 100px;
  height: 100px;
}
.diagonal-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
  transform: rotate(45deg);
  transform-origin: left center;
}

使用 SVG 内联

直接在 HTML 中嵌入 SVG 的 <line> 元素，通过设置起点和终点坐标生成斜线。这种方法适合需要精确控制斜线位置和角度的场景。

<svg width="100" height="100">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />
</svg>

通过 clip-path 裁剪

使用 clip-path 裁剪元素的一部分形成斜线。定义多边形的顶点坐标，裁剪出斜线形状。

.diagonal-line {
  width: 100px;
  height: 100px;
  background: black;
  clip-path: polygon(0 0, 10% 10%, 90% 90%, 100% 100%);
}

选择方法的建议

• 简单斜线推荐使用 linear-gradient 或 transform 方法。
• 需要复杂斜线或动画效果时，优先考虑 SVG 或 clip-path。
• 伪元素方法适合与其他内容结合的场景。