如何使用 CSS 创建斜线？

CSS 可以用多种方式创建斜线效果。以下是常见的几种方法。

1. 边框和媒体查询

使用边框和媒体查询，我们可以创建响应式的斜线效果。

.container {
  border-bottom: 1px solid #333;
}

@media screen and (min-width: 768px) {
  .container {
    border-left: 1px solid #333;
    border-bottom: none;
  }
}

在这个例子中，.container 元素初始化时有一个下边框。在根据屏幕宽度使用媒体查询时，当屏幕宽度大于或等于 768 像素时，会添加一个左边框，并移除下边框。

2. 渐变背景

使用 CSS 渐变背景可以非常容易地创建斜线效果。

.container {
  background: linear-gradient(135deg, transparent 10px, #333 0) 0 0/50px 50px repeat;
}

在这个例子中，.container 元素使用线性渐变背景，从左下角到右上角，角度为 135 度。渐变方向由 background-position 属性指定。通过 background-size 属性指定渐变大小和重复方式。

3. 伪元素和旋转

使用 CSS 伪元素和旋转可以实现精确定位的斜线效果。

.container {
  position: relative;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  transform: rotate(-45deg);
  transform-origin: top left;
  background-color: #333;
}

在这个例子中，.container 元素使用相对定位，创建一个没有内容的伪元素，并将其绝对定位到 .container 元素的左上角。通过使用 transform 属性和 transform-origin 属性旋转伪元素以创建斜线效果。

以上就是常见的几种 CSS 创建斜线的方法。根据你的具体需求，你可以选择其中任何一种方法来创建你的斜线效果。