怎样用伪类元素 before 实现直角角标，里面文字倾斜45度

要使用伪类元素 `before` 实现直角角标，里面文字倾斜45度，可以按照以下步骤进行：

1. 创建一个元素，例如一个 `div`，并设置其 `position` 为 `relative`。
2. 为该元素创建一个伪类元素 `before`，并设置其 `content` 为空。
3. 设置伪类元素 `before` 的 `position` 为 `absolute`，并将其定位到父元素的角落处，例如右上角。
4. 设置伪类元素 `before` 的 `width` 和 `height` 为 `0`，并设置其 `border` 的宽度和颜色，以创建一个直角三角形。
5. 设置伪类元素 `before` 的 `transform` 属性，将其旋转45度，并将其文字倾斜回来。

下面是一个示例 CSS 代码：

.container {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  padding: 20px;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 30px solid red;
  border-left: 30px solid transparent;
  transform: rotate(45deg);
}

.container span {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  transform: rotate(-45deg);
}

在上面的示例中，我们创建了一个容器元素 `.container`，并在其中创建了一个伪类元素 `before`。我们设置了伪类元素的位置、大小和边框，创建了一个右上角的直角三角形。然后，我们在伪类元素中添加了一个 `span` 元素，将其文字倾斜回来，并将其放在伪类元素的上面。最后，我们设置 `span` 元素的 `z-index` 属性，使其位于伪类元素之上，以便正常显示。