linear-gradient做折角更可靠，因其兼容ie10+、渲染稳定，而clip-path在safari 15.4前不支持百分比且安卓webview易错位；核心是用::before和::after双渐变叠加模拟翻角与阴影，并通过css变量控制尺寸实现hover动画。
为什么用 linear-gradient 做折角比 clip-path 更可靠
因为 clip-path 在 Safari 15.4 之前不支持百分比坐标，且部分安卓 WebView 对 clip-path: polygon() 渲染错位；而 linear-gradient 切角基于背景层叠加，兼容性覆盖 IE10+，渲染稳定，也更容易控制阴影和 hover 变化。
核心思路是：在元素伪元素上铺两层渐变，一层做“翻起的角”，一层做“阴影/高光”，用透明度过渡模拟折叠感。
-
::before绘制主折角（斜向透明到不透明） -
::after叠加浅色高光或深色阴影增强立体感 - 所有颜色值推荐用
rgba()，方便后期调整透明度而不重写结构
::before 折角背景的渐变写法与参数含义
关键不是“画一个三角形”，而是用两个方向相反的线性渐变交叠出锐角区域。典型写法：
background: linear-gradient(-135deg, transparent 10px, #fff 0) top right / 30px 30px no-repeat,
linear-gradient(135deg, transparent 10px, #fff 0) top right / 30px 30px no-repeat;
这里要注意三点：
- 第一个渐变角度为
-135deg，从右上往左下拉，控制“折起边”的外沿；第二个用135deg反向拉，形成内侧收口 -
10px是折角尖端的透明宽度，数值越小角越尖，但小于 6px 在低分辨率屏可能锯齿 -
top right / 30px 30px定义渐变定位和尺寸——必须显式设置尺寸，否则默认铺满容器，无法精确定位折角位置
hover 时动态展开折角的实现难点
直接给 background-size 或 background-position 加 transition 无效，因为多层渐变的 transition 不被多数浏览器支持（Chrome 会跳变，Firefox 不触发）。可行方案只有：
- 用
transform: scale()缩放整个伪元素容器（需设transform-origin: top right） - 改用单层渐变 +
background-size配合background-position的组合动画（仅适用于简单翻角，立体感弱） - 更稳妥的是切换预设 class，用 CSS 变量控制尺寸，例如：
--fold-size: 24px，然后在 hover 中修改变量值并 transition 变量
示例中推荐第三种，既保持 declarative 风格，又规避了多背景 transition 的兼容问题。
移动端点击区域与 z-index 冲突问题
折角常被实现为 ::after 伪元素，若其 z-index 过高，会遮挡下方按钮或链接，导致 iOS Safari 点击失灵（尤其在 fixed 容器里）。排查方法：
- 打开开发者工具，选中目标元素，看
::after是否覆盖了可点击区域 - 确保伪元素的
pointer-events: none（除非你真需要它响应点击） - 如果必须保留交互，改用
isolation: isolate隔离堆叠上下文，而不是依赖z-index层叠 - 在 iPhone 上测试时，注意
touch-action: manipulation是否被父级意外禁用
真正难调的不是怎么画出那个角，而是让角存在、有质感、不挡事、动起来还顺滑——这四点全满足时，linear-gradient 才算用对了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
