css图片折叠效果 |css hr边缘不光滑

.fold {
overflow: hidden;
position: relative;
width: 300px;
height: 200px;
background: #fff url("image.jpg") no-repeat 0 0;
}
.fold:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(-45deg, transparent 0%, transparent 50%, #000 50%);
transform-origin: 100% 0;
transform: rotateZ(-45deg);
transition: all 0.3s ease-in-out;
}
.fold:hover:before {
transform: rotateZ(0);
}

代码中，大家首先创建一个大小为300×200像素的容器，使用背景图片作为内容。然后使用伪类:before添加一个透明到黑色颜色渐变的半透明层，以及transform属性，将其旋转45度。在:hover时，让这个伪类元素上的transform属性从初始状态到过渡后的状态过渡，就可以实现图片的折叠效果了。

这种折叠效果不仅可以应用于图片，还可以用在文本、图标等元素上。通过改变代码中的渐变颜色、旋转角度等属性，可以实现不同的折叠效果。