css斜线制作

使用 CSS 制作斜线效果

斜线效果可以通过多种方式实现，以下是几种常见的方法：

使用 CSS 线性渐变

通过 linear-gradient 可以创建斜线背景：

.diagonal-line {
  background: linear-gradient(45deg, transparent 49%, #000 49%, #000 51%, transparent 51%);
  background-size: 20px 20px;
}

调整角度参数（45deg）可以改变斜线方向，修改颜色和百分比可以控制斜线粗细。

使用 CSS 旋转伪元素

通过旋转伪元素创建斜线：

.slash-element {
  position: relative;
  overflow: hidden;
  height: 100px;
}

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

使用 CSS 边框技巧

利用边框和旋转创建斜线：

.diagonal-box {
  width: 100px;
  height: 100px;
  position: relative;
}

.diagonal-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 2px solid black;
  transform: skewX(45deg);
}

使用 SVG 内联

通过内联 SVG 创建更精确的斜线：

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

对应的 CSS：

.svg-slash {
  width: 100px;
  height: 100px;
}

使用 clip-path 属性

通过裁剪路径创建斜线效果：

.clipped-slash {
  width: 200px;
  height: 100px;
  background: #000;
  clip-path: polygon(0 0, 100% 100%, 100% 90%, 0 10%);
}

每种方法适用于不同场景，线性渐变适合重复背景图案，伪元素方法适合单一直线，SVG 提供最精确控制，而 clip-path 适合创建复杂斜线形状。