css斜线制作

使用线性渐变创建斜线

通过CSS的linear-gradient可以生成斜线效果。设置渐变角度和颜色断点，使两种颜色在交界处形成斜线。

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

调整45deg可改变斜线角度，#000和transparent分别代表斜线颜色和背景透明部分。

使用伪元素和旋转变换

通过伪元素结合transform: rotate()实现斜线。创建高度为1px的元素并旋转特定角度。

.element::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
  transform: rotate(15deg);
}

这种方法适合在特定元素内添加斜线装饰，旋转角度可自由调整。

使用SVG内联背景

通过SVG代码直接生成斜线图案，作为背景图像使用。这种方式可精确控制斜线样式。

.diagonal-pattern {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><line x1='0' y1='0' x2='10' y2='10' stroke='black' stroke-width='1'/></svg>");
}

SVG方法支持复杂斜线图案，可通过修改stroke属性调整颜色和粗细。

使用边框和旋转组合

通过元素的边框特性结合旋转制作斜线。适合创建对角分割线效果。

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

此方法常用于创建三角形或箭头，调整边框比例和旋转角度可获得不同斜线效果。

使用clip-path裁剪路径

通过clip-path属性裁剪元素形成斜边效果。适合不规则斜线切割。

.clipped-element {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  background: #000;
  height: 200px;
}

polygon函数定义裁剪路径的顶点坐标，通过调整百分比值控制斜线走向和倾斜程度。