折角按钮必须用::before伪元素实现：父元素设position: relative且无overflow: hidden，::before用两层渐变叠加、background-position: top right、固定background-size及pointer-events: none；hover动画应通过CSS变量控制--fold-size并transition该变量。
折角按钮不能只靠 background: linear-gradient(-135deg, …)
直接在 button 上写 background: linear-gradient(-135deg, transparent 10px, #fff 0) 几乎肯定看不到折角——不是代码错，而是三层问题同时发生：linear-gradient 声明在前，被后面写的纯色背景（比如 #fff）盖掉；没设 background-position: top right，渐变默认从左上铺开，三角形根本不在右上角；漏了 no-repeat 和固定 background-size，结果小三角平铺成锯齿带，一缩放就变形。
必须用 ::before 伪元素实现可交互折角
真要让折角能 hover、不遮挡文字、适配图片背景或 flex 容器，就得抽成 ::before：
- 父
button设position: relative，且不能有overflow: hidden（否则伪元素被裁掉） -
::before设content: ""、position: absolute、top: 0、right: 0、width: 0、height: 0 - 用两层渐变叠加：一层做翻起面（
linear-gradient(-135deg, #f8f8f8 0, #f8f8f8 8px, transparent 9px)），一层做阴影（linear-gradient(45deg, rgba(0,0,0,0.1) 0, transparent 8px)） - 加
background-position: top right和固定background-size: 24px 24px锁死位置，避免响应式漂移 - 最后补一句
pointer-events: none，确保点击穿透到按钮本身
hover 动画别碰 background-size 或 background-position 的 transition
Chrome 里给多层渐变的 background-size 加 transition 会跳变，Firefox 根本不触发——这是浏览器兼容性黑洞。正确做法是：
- 在
button上定义 CSS 变量：--fold-size: 16px -
::before里写background-size: var(--fold-size) var(--fold-size) -
button:hover { --fold-size: 24px; }，再加transition: --fold-size 0.2s ease - 如果折角用了
transform: rotate()模拟微翘，必须同步设transform-origin: top right，否则旋转中心偏移，hover 时整个角会“滑出去”
斜角标签和折角按钮别混用
很多人把“斜角标签”方案（transform: rotate(45deg) + overflow: hidden）套在按钮上，结果发现文字被裁、点击区域错位、响应式下角度跑偏。这不是 bug，是设计错位：斜角标签本质是覆盖层，适合静态文案；折角按钮需要视觉连贯+交互保真，必须走伪元素+渐变+变量控制这套链路。颜色尽量用 rgba()，后期换主题色只需调 alpha，不用重写结构。
立即学习“前端免费学习笔记（深入）”；
