如何用纯CSS实现一个倾斜四十五度的右上角封页角效果？

4 min read

可以使用CSS的transform属性和::before伪元素来制作封页角效果。

HTML代码如下：

<div class="page-corner"></div>

CSS代码如下：

.page-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: #007bff;
  transform: rotate(45deg);
}

.page-corner::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background-color: #007bff;
  transform: rotate(-45deg);
}

解释：

  • .page-corner设置了位置、尺寸和背景颜色，同时使用transform属性将其旋转45度，使其变成右上角倾斜状态。
  • ::before伪元素用于创建封页角的三角形，其位置、尺寸和旋转角度需要与.page-corner相对应。