直接用 background 渐变切右上角容易露白，因渐变默认从左上角铺开且若主背景色写在渐变后会被覆盖；需将渐变放最后并用 background-position: top right 锁定起点。
为什么直接用 background 渐变切右上角容易露白？
因为渐变层默认从左上角开始铺，to bottom left 方向的三角形若没锚定位置，会随容器尺寸偏移；更常见的是主背景色写在渐变后面（如 background: linear-gradient(...), #fff），结果渐变层被纯色盖住——你根本看不见折角。必须把渐变放最后、且用 background-position: top right 锁死起点，否则在响应式布局里一缩放就错位。
::before 伪元素切角比纯背景渐变更可控的三个原因
它不依赖父元素背景色，能独立设 z-index 避免被内容遮挡；可加 transform: rotate() 模拟纸张微翘；阴影和边框也能单独控制。但要注意：position: absolute 必须配合 top: 0; right: 0;，否则在 flex 或 grid 容器里可能定位失效。
- 伪元素默认不占文档流，但若父容器设了
overflow: hidden，折角会被裁掉 - 用
border构造三角形（如border-top: 15px solid #f8f8f8; border-right: 15px solid transparent）兼容性好，但角度固定为 45°，没法调成 30° 或圆角过渡 - 用
linear-gradient(-135deg, #f8f8f8 0, #f8f8f8 8px, transparent 9px)更灵活，但 Safari 6.1 之前需补-webkit-前缀
如何让折角适配渐变背景或图片背景？
纯 background 渐变方案在非纯色背景下必然穿帮——折角区域只能是单色，盖不住底图。这时必须放弃背景层，改用 ::before 画一个「镂空」效果：把伪元素设为透明边框+深色内阴影，再用 clip-path: polygon() 切出斜边。但注意 clip-path 在 Safari 15.4 以下不支持多边形，稳妥做法是双伪元素叠加：::before 画浅色阴影三角，::after 叠深色翻起面，两层都用 background: linear-gradient() + background-size: 20px 20px 控制大小。
容易被忽略的细节：文字溢出和点击穿透
折角区域如果只是视觉装饰，得确保它不拦截鼠标事件——加 pointer-events: none。但若折角要响应点击（比如跳转链接），就得把它变成可交互元素，此时必须检查 z-index 是否高于内容层，否则文字会盖住折角。另外，当卡片有 border-radius 时，折角和圆角会打架，解决方案只有两个：background-clip: padding-box（默认值，别乱改）或干脆把圆角设在伪元素上，主容器保持直角。
立即学习“前端免费学习笔记（深入）”；
