css制作卷边效果

使用伪元素和渐变实现卷边效果

通过 ::before 或 ::after 伪元素配合线性渐变，可以模拟纸张卷曲的视觉效果。以下是一个基础实现方案：

.box {
  position: relative;
  width: 200px;
  height: 200px;
  background: #f5f5f5;
  overflow: hidden;
}

.box::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(-45deg, transparent 45%, #ddd 45%, #ddd 55%, transparent 55%);
}

增加阴影增强立体感

在伪元素上添加阴影效果可以让卷边更逼真：

.box::after {
  box-shadow: -2px -2px 5px rgba(0,0,0,0.2);
  transform: rotate(45deg);
  transform-origin: right bottom;
}

使用 SVG 实现复杂卷边

对于更复杂的卷曲效果，可以嵌入 SVG 作为背景：

.box {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 100 L100 100 L100 0 Q80 20 0 100 Z" fill="%23ddd"/></svg>');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

动态悬停效果

添加交互状态让卷边响应鼠标悬停：

.box:hover::after {
  transform: rotate(45deg) scale(1.2);
  transition: transform 0.3s ease;
}

多角度卷边实现

通过调整伪元素定位和旋转角度，可以实现不同方向的卷边：

/* 左上角卷边 */
.box::before {
  top: 0;
  left: 0;
  transform-origin: left top;
  transform: rotate(-45deg);
}

这些方法可以组合使用，通过调整颜色、尺寸和阴影参数来匹配不同设计需求。实际应用中可能需要根据具体场景微调参数值。