最稳的折角方案是用两层渐变叠加在::before伪元素上，配合background-position:top right、固定background-size及pointer-events:none，避免响应式漂移、覆盖、平铺、变形和定位失效。
直接用 linear-gradient 在右上角切出折角，最稳的方案不是“画一个三角形”，而是用两层渐变在 ::before 伪元素上叠加出翻起面+阴影，再通过 background-position: top right 和固定 background-size 锁死位置——否则响应式缩放时折角会漂移、错位甚至露白。
为什么 background: linear-gradient(-135deg, transparent 10px, #fff 0) 常常看不见？
这不是代码写错了，而是背景层顺序和定位没配对：
-
linear-gradient写在background声明的前面，结果被后面声明的#fff覆盖（CSS 背景层是“后声明者在前”） - 没设
background-position: top right，渐变默认从左上角铺开，to bottom left方向的三角形根本不在右上角 - 漏了
no-repeat，小三角变成平铺锯齿带；或者background-size没设成固定值（如24px 24px），一缩放就变形 - 父容器有
border-radius，而折角层没做隔离，圆角和斜边打架，边缘撕裂
用 ::before 实现可交互、不遮挡内容的折角
纯背景渐变只适合静态装饰，真要支持 hover、点击或适配图片背景，必须抽成 ::before 伪元素：
- 显式写
content: ""+position: absolute+top: 0; right: 0;，否则在 flex/grid 容器里定位失效 - 宽高设为
0，靠background: linear-gradient(-135deg, #f8f8f8 0, #f8f8f8 8px, transparent 9px)构造三角形，比border更易调角度 - 加
pointer-events: none确保不拦截下方文字或按钮点击；若折角本身要跳转，再单独提一层z-index - 避免
overflow: hidden父容器，否则伪元素会被裁掉——折角区域必须“溢出”才能显示
hover 展开折角动画为何总跳变？
直接给 background-size 或 background-position 加 transition 在 Chrome 会跳，在 Firefox 根本不触发。浏览器对多层渐变的过渡支持极差：
- 别碰多背景的 transition —— 这是兼容性黑洞
- 改用 CSS 变量控制尺寸：
--fold-size: 16px，然后在::before里写background-size: var(--fold-size) var(--fold-size) - hover 时只改变量值：
&:hover { --fold-size: 24px; }，再加transition: --fold-size 0.2s ease - 这个方案在 Safari 15.4+、Chrome 110+、Firefox 100+ 全部生效，且保持声明式写法
最易被忽略的是：折角区域一旦用了 transform（比如模拟纸张微翘），就必须同步调整 transform-origin: top right，否则旋转中心偏移，hover 时整个角会“滑出去”。还有，所有颜色尽量用 rgba()，后期换主题色时只需调 alpha，不用重写结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
