如何在div中实现逼真的纸张折角效果？

云上老周

2026-6-19

实现纸张折角效果的问题

我想在div中实现纸张折角效果，查了很多网站还是搞不懂具体怎么实现。

当前实现效果

当前实现的折角效果

当前代码

<div style="max-width: 700px; height: auto; background-color: #fff;">
<div style="max-width: 50px; height: 50px; background-color: transparent; border-width: 0 20px 20px 0; border-style: solid; border-color: #A6A49D #fff;">
</div></div>

期望实现效果

期望的纸张折角效果

要实现你想要的带自然光影的纸张折角效果，可以用CSS伪元素结合渐变来模拟，比单纯用边框更真实。以下是优化后的代码：

HTML结构

<div class="paper">
  <!-- 这里放你的内容 -->
</div>

CSS样式

.paper {
  max-width: 700px;
  height: auto;
  background-color: #fff;
  position: relative;
  padding: 20px;
  /* 给纸张加轻微阴影增强立体感 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.paper::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  /* 用渐变模拟折角的明暗过渡 */
  background: linear-gradient(135deg, transparent 50%, #e6e6e6 50%, #d9d9d9 55%, #f2f2f2 100%);
  /* 折角的细微阴影，让效果更自然 */
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
}