当前位置：首页 > CSS

css斜线制作

2026-04-01 04:52:48CSS

使用 CSS 制作斜线的方法

方法一：利用 linear-gradient 背景渐变

通过 CSS 的 linear-gradient 可以创建斜线效果。调整角度参数可控制斜线方向。

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

方法二：使用 transform: skew() 变形

通过 skew() 函数对元素进行倾斜变形，生成斜线效果。

.skew-line {
  width: 200px;
  height: 2px;
  background-color: #000;
  transform: skew(45deg);
}

方法三：伪元素结合旋转

利用 ::before 或 ::after 伪元素，通过旋转生成斜线。

.rotated-line {
  position: relative;
  width: 200px;
  height: 100px;
}

.rotated-line::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

方法四：SVG 内联

直接在 HTML 中嵌入 SVG 的 <line> 元素，通过坐标点控制斜线角度。

<svg width="200" height="200">
  <line x1="0" y1="0" x2="200" y2="200" stroke="#000" stroke-width="2"/>
</svg>

方法五：边框透明技巧

通过设置部分边框透明，结合 transform 实现斜线。

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

选择建议

css斜线制作