CSS 如何绘制斜线的 div

在本文中，我们将介绍如何使用 CSS 绘制带有斜线的 div。斜线是一种常用的设计元素，可以用于图标、背景和分割线等各种应用场景。通过使用 CSS 的 transform 和伪元素，我们可以轻松地实现一个倾斜的 div，并在其中添加斜线效果。

阅读更多：CSS 教程

使用 transform 实现斜线效果

通过使用 CSS 的 transform 属性，我们可以实现对元素进行旋转、缩放、倾斜等操作。在实现斜线效果时，我们可以借助 transform 的旋转功能来将一个正方形 div 倾斜，从而实现斜线的效果。

以下是一个示例代码，演示如何使用 transform 实现一个红色斜线的 div：

<div class="diagonal"></div>

.diagonal {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: rotate(45deg);
}

在上述代码中，我们创建了一个宽高都为 200px 的 div，并设置其背景为红色。接着，我们使用 transform: rotate(45deg) 将该 div 旋转了 45 度，结果就是一个倾斜的斜线 div。

使用伪元素添加斜线样式

除了使用 transform 实现斜线效果外，我们还可以使用伪元素 ::before 或 ::after 来添加斜线样式。这种方法更加灵活，可以在斜线上应用各种样式和效果。

下面是一个示例代码，演示了如何使用伪元素 ::before 添加一个左下至右上的斜线：

<div class="diagonal"></div>

.diagonal {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
}

.diagonal:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-color: transparent;
  border: 2px solid red;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  z-index: -1;
}

在上述代码中，我们首先创建了一个宽高为 200px 的 div，并设置其背景为红色。然后，我们在该 div 上使用 ::before 伪元素创建了一个绝对定位的元素。通过设置 top、left、width、height、background-color 和 border 等样式，我们定义了一个覆盖整个 div 并具有斜线效果的矩形。

最后，在 ::before 伪元素上应用了 transform: rotate(-45deg) 来旋转整个矩形，从而实现斜线的效果。注意，我们还设置了 transform-origin: bottom left，以便让斜线的起点位于 div 的左下角。