当前位置：首页 > CSS

css怎么制作斜线

2026-04-02 14:43:51CSS

使用 CSS 制作斜线的方法

通过 `linear-gradient` 实现斜线

利用 CSS 的 linear-gradient 可以轻松创建斜线背景。以下是一个示例代码：

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

调整 45deg 可以改变斜线的角度，black 是斜线颜色，transparent 是透明部分。

使用 `transform: skew()` 倾斜元素

通过 transform 属性中的 skew() 函数可以让元素倾斜，形成斜线效果：

css怎么制作斜线

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

skew(45deg) 表示沿 X 轴倾斜 45 度，调整参数可改变斜线角度。

通过伪元素和边框制作斜线

结合伪元素和边框属性可以创建更复杂的斜线：

css怎么制作斜线

.line-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.line-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 2px solid black;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

调整 rotate 的角度和 border 的样式可以自定义斜线粗细和颜色。

使用 SVG 内联背景

通过 SVG 作为背景图像生成斜线，适合复杂图案：

.svg-line {
  width: 200px;
  height: 200px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='black' stroke-width='2'/></svg>");
}

SVG 的 line 元素可以精确控制斜线的起点和终点坐标。