单层 linear-gradient 仅能裁切缺角，无法模拟真实折角的明暗交界与立体感；需结合伪元素叠加翻起面、阴影及 transform 旋转，并精准控制渐变角度、尺寸与层级顺序。
用 linear-gradient 在右上角切出折角三角形
右上角折角最常用、最轻量的实现方式就是单层渐变裁切，核心是让透明色从右上角向左下方向铺开一个小三角。关键不是“画出折角”，而是“盖住一部分背景”，制造视觉缺口。
常见错误现象：background: linear-gradient(-135deg, transparent 2em, #fff 0) 写在 background 声明末尾，结果被主背景色覆盖，完全看不到；或者没加 no-repeat，导致小三角平铺成锯齿带。
-
to bottom left比-135deg更推荐——语义明确、IE9+ 全兼容，且避免角度计算偏差 - 尺寸控制靠
background-size：比如2em 2em，必须配no-repeat 100% 0锚定到右上角 - 起始透明段长度（如
transparent 1.414em）≈ 折角直角边 × √2，这是 45° 斜边长度，填错会导致三角形歪斜或露白缝 - 如果容器有
border-radius，折角区域会和圆角冲突，建议把折角层单独抽出来（见下一条）
用 ::after 伪元素独立绘制翻起纸面
纯背景渐变只能模拟“缺一块”，但真实折角需要明暗交界：浅色底 + 深色翻起面 + 微阴影。这时伪元素才是可控方案——它能独立 transform、加 box-shadow、响应 hover，还不影响文字流。
容易踩的坑：::after 默认继承父级 background-color，若父容器是渐变或图片背景，伪元素会透出底层内容，看起来像错位而非折叠。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
content: ""和position: absolute，再用top: 0; right: 0;对齐右上角 - 宽高设为
0，靠border或linear-gradient构造三角形；后者更稳，例如：background: linear-gradient(-135deg, #f0f0f0 0, #f0f0f0 8px, transparent 9px) - 若要旋转模拟翻折感，
transform: rotate(-45deg)后需微调top/right补偿中心偏移（约减去width * 0.707） - 别给伪元素加
z-index单独设层叠——它默认就在父元素内容上方，除非父容器有overflow: hidden或意外创建了新层叠上下文
多层叠加时 background 顺序与层级陷阱
CSS 背景层是“后声明者在前”，这点和 z-index 直觉相反。折角效果若用多层渐变实现（比如底层阴影 + 上层翻起面），顺序写反就全白忙活。
典型错误：background: #fff, linear-gradient(...) —— 这里 #fff 在底层，linear-gradient 在顶层，但开发者常误以为第一个是顶层。
- 正确写法（折角在最上）：
background: linear-gradient(to bottom left, transparent 0, transparent 14px, #f8f8f8 15px), #fff - 若同时用伪元素 + 多层背景，伪元素默认比所有背景层都高，无需额外
z-index，但得确保父容器有position: relative - 当折角要配合卡片阴影（
box-shadow）时，伪元素不会自动继承，必须单独加，且模糊值不宜超过2px，否则边缘发虚失真 - 深色主题下，用
transparent结尾比white更安全，避免换肤时折角区域漏出底层色
为什么不能只靠一个 linear-gradient 实现逼真折角
单层渐变最多生成一个斜边，但人眼识别“纸张翻起”依赖三个信号：缺角形状 + 翻起面明暗差异 + 边缘过渡软硬。缺一不可。
你看到的“生硬裁切”“像被刀切掉一块”，基本都是因为只做了第一步——裁，没做第二步——叠。
- 单层
linear-gradient(225deg, transparent 1.5em, #6d98bd 0)只能切角，没有立体感 - 真正折角需要两层：一层浅色模拟受光面（或阴影），一层深色模拟翻起纸面，且两层 50% 对齐点必须一致，否则出现白缝
- 两层都锚定
bottom right或top right，但background-size要差异化：阴影层略大（如24px 24px），翻起层略小（如18px 18px），才能模拟厚度 - 移动端高 DPR 屏幕下，
1px级别的错位会被放大，建议统一用em或rem，避免像素断裂
折角最难的不是画出形状，而是让明暗交界线刚好落在人眼预期的位置——这取决于你对纸张厚度、光源方向、观察距离的隐含假设。一旦这些参数没对齐，再精细的渐变也会显得假。动手前先用铅笔在纸上画一遍折痕角度，比调十次 CSS 更有效。
