使用纯CSS制作一个右上角倾斜四十五度封页角效果
要使用纯CSS制作一个右上角倾斜45度的封页角效果，你可以使用伪元素（:before 或 :after）与CSS的 transform 属性。以下是一个简单的示例，说明如何为页面或元素添加这种效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倾斜封页角效果</title>
<style>
.container {
position: relative;
width: 200px;
height: 300px;
background-color: #f0f0f0;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px; /* 你可以根据需要调整这个尺寸 */
height: 100px; /* 你可以根据需要调整这个尺寸 */
background-color: #ff0000; /* 你可以设置你喜欢的颜色 */
transform: rotate(45deg);
transform-origin: top right;
}
</style>
</head>
<body>
<div class="container">
<!-- 你的内容 -->
</div>
</body>
</html>
在这个示例中，.container 是你想要添加封页角的元素。使用 ::before 伪元素，我们在容器的右上角创建了一个倾斜45度的红色块。你可以根据需要调整这个块的大小和颜色。
注意：transform-origin: top right; 确保旋转是围绕右上角进行的。
