用 linear-gradient 做折角比 clip-path 更稳定，尤其兼容 iOS Safari 和旧安卓 WebView；单层渐变需注意 background 顺序、no-repeat、固定 background-size；复杂折角推荐 ::after 伪元素双渐变叠加，并用 CSS 变量控制 hover 动画。
直接用 linear-gradient 做折角比用 clip-path 更稳——尤其在 iOS Safari 和旧版安卓 WebView 里，clip-path: polygon() 容易错位或不支持百分比坐标，而 linear-gradient 从 IE10 起就跑得稳，渲染也一致。
右上角单层渐变切角：最简实现但容易被盖住
只用一层渐变就能“切”出三角形缺口，但必须注意背景层顺序和尺寸控制，否则根本看不到效果。
-
background声明里，折角渐变必须写在主背景色前面，比如：background: linear-gradient(to bottom left, transparent 0, transparent 14px, #fff 15px), #fff；写反了就会被底色盖掉 - 必须加
no-repeat，否则小三角会平铺成锯齿带 -
background-size要设成固定值（如24px 24px），不能用百分比，否则在不同宽高比容器里会变形 - 如果容器本身有
border-radius，折角区域会跟圆角打架，建议把折角抽到::after伪元素里单独控制
::after 伪元素双渐变叠加强化立体感
单层渐变只能模拟“缺一块”，真实折角需要明暗交界——浅色底 + 深色翻起面 + 微阴影。这时用 ::after 是唯一靠谱方案。
- 伪元素要设
content: ""、position: absolute、top: 0、right: 0，再用width/height控制大小（如24px） - 两层渐变分别模拟翻起面和阴影：
linear-gradient(-135deg, #f8f8f8 0, #f8f8f8 8px, transparent 9px)（翻起） +linear-gradient(135deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 6px, transparent 7px)（阴影） - 颜色统一用
rgba()，后期调透明度不用动结构 - 别乱加
z-index：伪元素默认就在内容上方，但如果父容器有overflow: hidden或transform，可能被裁掉或层叠错乱
hover 动画不能直接 transition background-size
给多层渐变的 background-size 或 background-position 加 transition 基本无效——Chrome 会跳变，Firefox 根本不触发。得换思路。
立即学习“前端免费学习笔记（深入）”；
- 推荐用 CSS 自定义变量控制尺寸，比如定义
--fold-size: 16px，然后在::after里写background-size: var(--fold-size) var(--fold-size) - hover 时只改变量值：
:hover { --fold-size: 24px; }，再配transition: --fold-size 0.2s - 如果要用 transform 动画，得设
transform-origin: top right，否则缩放中心偏移，角会“飘” - 避免用
rotate()配top/right补偿——计算麻烦且在高DPI屏上易露白缝
真正难的不是画出那个角，而是让阴影过渡自然、hover 不闪、移动端点击不失效。很多效果在桌面 Chrome 看着好，一到 iOS Safari 就错位，根源常是伪元素的 z-index 冲突或 overflow 隐藏了关键层。动手前先 inspect 一下层叠上下文。
