.fold {
width: 200px;
height: 200px;
position: relative;
background: #fff;
overflow: hidden;
}
.fold:before {
content: "";
position: absolute;
top: -40px;
right: 0;
width: 100%;
height: 80px;
background-image: linear-gradient(-90deg, transparent 0, #fff 30%, #fff 100%);
transform-origin: top right;
transform: rotate(45deg);
}
.fold:after {
content: "";
position: absolute;
bottom: -40px;
left: 0;
width: 100%;
height: 80px;
background-image: linear-gradient(90deg, transparent 0, #fff 30%, #fff 100%);
transform-origin: bottom left;
transform: rotate(45deg);
}首先，在HTML中创建一个具有“fold”类的DIV，然后在CSS中定义该类。通过设置“position”属性为“relative”，DIV将设置自身作为相对于其父元素的参考点，允许大家在其中创建任意数量的元素并使用定位属性来放置它们。
大家使用伪类（:before和:after）创建折页的影响。大家将在:before中创建与决定折叠角度的角度相垂直的百分比渐变，通过将其旋转45度，取决于位置。由于大家想要创建一个折叠的影响，因此需要合并这个元素和大家的容器的角度。
现在大家已经创建了第一个折叠特效，大家需要为其添加第二个特效。大家可以通过复制:before部分的相关代码并进行所需更改来实现。唯一的区别是，大家将为:after应用相反方向的旋转效果。
通过这些简单的CSS技巧，大家可以轻松地为网页添加一个有趣的折页效果，增强用户体验并为其提供更好的视觉感受。