用 linear-gradient 在右上角切三角形折角，核心是通过 to bottom left 方向的渐变在顶层覆盖出小三角形，需 background-size 固定、渐变尺寸约 15px、多层背景中折角层置前，或用 ::after 伪元素独立控制更稳妥。
用 linear-gradient 在右上角切出三角形折角
核心是把背景层拆成两部分：主色区域 + 右上角的透明（或浅色）三角形，用一个 linear-gradient 模拟“裁切”效果。不是真裁剪，而是靠渐变色过渡出视觉上的缺口。
关键在角度和位置控制：从右上角出发，向左下方向铺一个很小的三角形渐变，让它颜色和父容器背景一致（比如白色），就能“盖住”一部分内容，形成折角错觉。
- 必须设
background-size为固定值（如100% 100%），否则渐变会平铺重复，破坏三角形形状 - 渐变方向写成
to bottom left最稳，比角度数值（如225deg）更直观、兼容性更好 - 起始色块要足够小（比如
15px 15px），否则三角形太大，像缺了一大块而不是折角
background 多层叠加时的顺序和层级陷阱
CSS 背景层是从后往前绘制的：第一个声明的背景在最底层，最后一个在最上层。折角必须放在顶层，否则会被主背景盖掉。
常见错误是把折角渐变写在主背景色前面，结果完全看不见；或者忘了加 background-color，导致折角区域透出父级背景，看起来像错位而不是折角。
立即学习 “ 前端免费学习笔记（深入）”；
- 正确顺序：
background: linear-gradient(……), #fff;（渐变在前，纯色在后） - 更稳妥写法：
background: linear-gradient(to bottom left, transparent 0, transparent 14px, #fff 15px), #fff; - 如果容器有边框或阴影，折角层不会自动继承，得单独给伪元素或额外容器加
用伪元素 ::after 实现更干净的折角控制
纯背景渐变难微调旋转、阴影或点击区域，而用 ::after 伪元素画三角形，能独立定位、加 transform、甚至 hover 动画。
原理一样是线性渐变，但把它抽成独立图层，不干扰主内容流，也不怕背景色覆盖问题。
- 设置
position: absolute，右上角对齐：top: 0; right: 0; - 宽高设为
0，靠border或linear-gradient构造三角形（推荐后者，更可控） - 示例：
background: linear-gradient(-135deg, #f8f8f8 0, #f8f8f8 8px, transparent 9px); width: 24px; height: 24px; - 注意 z-index：伪元素默认在内容上方，但若父容器有
overflow: hidden，可能被裁掉
IE 和旧版 Safari 下 linear-gradient 的兼容写法
IE10+ 支持标准 linear-gradient，但必须带 -ms- 前缀；Safari 6.1 之前只认 -webkit-linear-gradient，且角度方向逻辑相反（top left 对应 to bottom right）。
现在多数项目已不需兼容 IE，但如果真要保，别只加前缀——旧引擎对多背景层支持差，容易整个背景失效。
- 最低安全写法：
background: #fff; background: linear-gradient(to bottom left, transparent 0, transparent 14px, #fff 15px), #fff; - 不推荐补全所有前缀，因为 Safari 旧版的
-webkit-渐变语法和现代差异大，容易引入新 bug - 真正要兼容 IE 的场景，建议改用 SVG 折角图标，更稳定
