结论：用::before画翻起三角+::after叠投影层更可控、兼容性更好；因box-shadow随transform扭曲导致阴影错位发虚，且旋转原点不可控，须分离视觉与投影职责，linear-gradient折角比border+rotate更稳定。
直接说结论：用 ::before 画翻起三角 + ::after 叠投影层，两层分离、各自定位，比单层 box-shadow 或 clip-path 更可控、更少兼容性翻车。
为什么不能只给 ::before 加 box-shadow
旋转后阴影跟着歪，看起来像错位而不是纸张翻折；尤其在 Safari 和旧版 Chrome 中，box-shadow 的渲染会随 transform 一起扭曲，边缘发虚或溢出容器。更麻烦的是，伪元素默认以中心为旋转原点，transform: rotate(-45deg) 后，阴影的偏移方向完全不可预测。
- 必须把「视觉面」和「投影」拆成两个伪元素，职责分离
-
::before负责三角形本体（用border或linear-gradient），仅做transform定位 -
::after专做投影，不旋转，只靠translate和clip-path控制形状与落点 - 父容器记得设
overflow: hidden，否则旋转后的伪元素可能撑出边界
linear-gradient 折角比 border + rotate 更稳
不是所有设备都支持 transform-origin: top right 精准锚定，尤其安卓 WebView 对旋转中心计算有偏差；而 linear-gradient 是纯背景层叠加，无 DOM 渲染干扰，IE10+ 全支持，Safari 也极少掉帧。
- 写法示例：
background: linear-gradient(-135deg, transparent 12px, #fff 0) top right / 28px 28px no-repeat - 角度 -135deg 控制外边沿走向，
12px是透明过渡宽度，太小（ -
top right / 28px 28px必须显式声明尺寸，否则渐变铺满整个元素，折角就“跑”到角落外了 - 若卡片本身有
border-radius，确保没设overflow: hidden，否则圆角会裁掉渐变层
hover 展开折角时鼠标频繁抖动？热区设计错了
这不是 CSS 动画问题，是触发区域太窄——鼠标从内容区移到折角途中经过空白间隙，状态反复切换，造成“抖动”。解决思路不是调 transition-timing-function，而是扩大响应范围。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
padding-right: 24px和padding-top: 24px，再用负 margin 把内容拉回原位：margin: -24px -24px 0 0 - 折角伪元素加
pointer-events: none，让它不拦截点击，避免遮挡下方按钮或链接（iOS Safari 尤其敏感） - 不要依赖
:hover做复杂交互，移动端无 hover；需点击展开时，改用 JS 切换 class，配合prefers-reduced-motion降级
最常被忽略的一点：所有颜色值统一用 rgba()，哪怕 alpha=1。这样后期换主题色时，只需改一个变量，不用重算所有投影透明度和渐变 stop 位置。
