最可控的折角实现是用::before和::after伪元素作为独立图层定位：父容器设position: relative，伪元素absolute锚定角落，显式z-index与pointer-events: none防点击拦截，投影用::after分离偏移不旋转，尺寸响应式适配。
用 ::before 和 ::after 伪元素定位折角最可控
纯背景渐变容易被主背景覆盖、难调阴影、无法独立响应事件；而用伪元素抽离折角，能精确控制位置、层级和动画。关键不是“画角”，而是把折角当作一个独立图层来定位。
必须设 position: absolute，并锚定到目标角（如右上角）：top: 0; right: 0;。注意父容器得是 position: relative，否则伪元素会相对于文档流定位，跑偏。
-
z-index要显式设置：折角通常需在内容之上，但不能过高遮挡下方可点击元素（尤其 iOS Safari 中z-index > 0的伪元素可能拦截点击） - 若父容器有
overflow: hidden，折角会被裁掉——要么改用overflow: visible，要么给父容器加足够padding并用负margin补偿布局 - 不要依赖
transform: rotate()后再微调top/right，旋转中心默认是元素中点，容易错位；推荐用transform-origin: top right配合rotate(-45deg)
折角尺寸用 background-size 或 width/height 控制，别写死像素
固定 24px 24px 在小卡片上太突兀，在大卡片上又看不清。更稳妥的是结合相对单位或 CSS 变量。
如果用线性渐变实现折角（比如 linear-gradient(-135deg, transparent 10px, #fff 0)），background-size 必须显式声明（如 24px 24px），否则默认铺满整个容器，三角形就没了。
- 文字为主卡片：用
background-size: 1.5em 1.5em，随字体缩放 - 响应式需求强：用 CSS 自定义属性，如
--fold-size: 24px，hover 时改值并transition --fold-size - 用 border 技巧（
border-top + border-left）时，尺寸由 border 宽度决定，但要注意box-sizing不影响伪元素的 border 渲染
阴影层必须分离，::after 不能和 ::before 共用 transform
真实折角有两层视觉信息：翻起的纸面（::before）+ 底部投影（::after）。如果把 box-shadow 直接加在 ::before 上，旋转后阴影也会歪斜，看起来像错位而不是厚度。
正确做法是让 ::after 单独画一个偏移的小方块，再用 clip-path: polygon(0 0, 100% 0, 100% 100%) 切出三角投影形状，避免模糊溢出。
- 投影层不要旋转，只做
translate(8px, -2px)偏移即可 -
clip-path在 Safari 15.4 前不支持百分比坐标，旧项目建议降级为border拼接或用透明渐变模拟 - 投影颜色推荐
rgba(0,0,0,0.15)，比纯黑更自然，也方便后期调整不重写结构
移动端点击失效？检查 pointer-events 和父容器 overflow
折角常被实现为 ::after，但它默认会拦截鼠标事件。在 iOS Safari 中，哪怕只是悬停区域，也可能导致下方按钮点击失灵，尤其是 position: fixed 容器里。
常见错误是加了 z-index 却忘了关交互：pointer-events: none 是最轻量的解法，它让伪元素“透明”于鼠标，又不影响视觉。
- 若折角需要 hover 动画，不能直接设
pointer-events: none，得改用opacity + transform: scale()组合，初始opacity: 0，hover 时过渡到 1 -
overflow: hidden是折角消失的头号嫌疑，尤其当父容器本身有圆角（border-radius）时，两者叠加极易裁掉渐变或伪元素 - 真要兼容 IE10+，避免用
clip-path和inset()，回归linear-gradient多层叠加方案，加-ms-和-webkit-前缀
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
