折角效果必须用::after而非background，因其能独立定位、背景和变换且不干扰DOM；用border+rotate时需锚定右上角并设transform-origin；主题色通过data-theme属性切换；装饰性折角须加pointer-events: none。
折角效果为什么必须用 ::after 而不是直接改 background
因为单层 background 无法同时表达「主内容区域」和「斜角翻起部分」两个视觉层级。折角本质是叠加在原容器右上角的一块带角度的三角形或梯形，::after 提供了独立定位、独立背景、独立 transform 的能力，且不干扰 DOM 结构。
常见错误是试图用 background: linear-gradient() 硬凑折角——它在缩放、高 DPI 屏或不同宽高比下极易错位，且无法响应鼠标事件（比如 hover 时想让折角动一下）。
-
::after必须设content: ""，否则不渲染 - 父容器要设
position: relative，否则::after会相对于最近定位祖先定位，可能飞出视口 - 别忘了加
z-index，否则折角会被后续兄弟元素盖住
::after 折角的尺寸与角度怎么算才不露白边
核心是用 border + transform: rotate() 或纯 clip-path。前者兼容性好（IE9+），后者更灵活但 Safari 旧版有渲染 bug。
用边框法时，常见露白是因为：右上角的 border-top 和 border-right 没对齐容器边缘，或者 transform-origin 设错了位置。正确做法是把伪元素左上角锚点移到父容器右上角，再旋转。
立即学习“前端免费学习笔记（深入）”；
- 设
top: 0; right: 0;定位到右上角 - 用
width: 60px; height: 60px;控制折角大小（值越大，翻起越明显） -
border-top: 20px solid #e0e0e0;+border-right: 20px solid transparent;生成直角三角形 - 加
transform: rotate(45deg);并设transform-origin: top right;让它绕右上角转
折角颜色怎么跟着主题自动变，而不是写死 #e0e0e0
不能依赖 CSS 变量传到 ::after 的 border-color —— 大部分浏览器不支持变量在伪元素边框中动态计算。稳妥方案是让父容器用 data-theme 属性控制，再用属性选择器匹配：
div[data-theme="dark"]::after {
border-top-color: #333;
}
div[data-theme="light"]::after {
border-top-color: #f5f5f5;
}
如果项目已用 CSS-in-JS 或 Tailwind，更推荐用 class 切换：card--corner-dark / card--corner-light，避免属性选择器性能隐患。
- 别用
inherit或currentcolor给border-color，它们不会继承父级背景色 - 深色模式下注意折角的对比度，
#333在黑底上可能太暗，看不清“翻起”感
移动端点击区域被折角遮挡怎么办
折角本身是装饰，不该拦截用户操作。但默认情况下，::after 是真实渲染的层，会响应 pointer-events，导致按钮、链接点不到。
最简单解法是加 pointer-events: none; 到伪元素上。但如果折角里嵌了可点图标（比如「NEW」标签），就得单独给那个图标开 pointer-events: auto，并确保它用 position: relative 提升层级。
- 只要折角纯装饰，无脑加
pointer-events: none; - 如果用了
clip-path做折角，某些安卓 WebView 会忽略pointer-events: none，得补touch-action: manipulation; - 真要交互的折角内容，别塞进
::after，改用真实<span class="corner-badge"></span>
折角看着小，但定位偏移 1px、旋转中心错半像素、或者没关 pointer-events，都足以让用户点空三次才意识到“这地方根本点不了”。做之前先用 Chrome DevTools 的 box model 面板盯住右上角那块区域，别信肉眼估算。
