用::before和::after实现折角效果的核心是：::before负责绝对定位，::after用linear-gradient背景生成锐利三角；须设content、display、父容器relative，并加pointer-events: none防点击拦截。
怎么用 ::before 和 ::after 做出折角效果
核心就两条：一个伪元素画三角，另一个用渐变模拟阴影或纸张翻起的明暗过渡。别想着用图片或 SVG —— 纯 CSS 更轻、更可控，也更容易响应式适配。
常见错误是直接给 ::after 设固定宽高加 border 画三角，结果在高缩放或不同字体下错位。真正稳的方式是用 linear-gradient 配合 background-position 和 background-size 控制三角方向和大小。
-
::before负责定位（position: absolute+top/right），不设内容，只撑出位置 -
::after用背景渐变生成三角：比如background: linear-gradient(-45deg, #ccc 0px, #ccc 6px, transparent 6px) - 必须设
content: ""和display: block，否则伪元素不渲染 - 父容器得有
position: relative，不然绝对定位会脱出上下文
为什么用 linear-gradient 而不是 border 画角
因为 border 三角依赖边框宽度和透明色拼接，一旦父元素有 transform、scale 或字体缩放，三角就会模糊、偏移甚至消失；而渐变是矢量计算，缩放时边缘依然锐利。
性能上，background-image 的渐变在现代浏览器里基本零开销，但 border 方案在频繁重绘区域（比如 hover 动画）容易触发 layout。
立即学习“前端免费学习笔记（深入）”；
-
border三角在zoom: 1.25下常出现 1px 错位，渐变无此问题 - 如果要支持深色模式，渐变里的颜色可直接用
color-scheme: light dark或 CSS 变量动态切换；border得靠 JS 或媒体查询硬切 - 移动端 Safari 对
border三角的抗锯齿处理不稳定，尤其在 Retina 屏上易发虚
background-position 和 background-size 怎么配比才不歪
关键不是“多大”，而是“从哪开始画”。折角本质是右上角的一个小三角，所以背景图原点得锚定在右上，并用 background-size 控制三角尺寸（比如 16px 16px），再用 background-position 微调落点（如 100% 0 表示贴右上角）。
常见踩坑：写成 background-position: right top —— 这个值在部分旧浏览器里不解析，必须用百分比或像素。
- 推荐写法：
background-position: 100% 0（右上）或calc(100% - 4px) 4px（微调内缩） -
background-size别用cover或contain，它们会拉伸变形；固定像素最可靠 - 如果折角要随容器宽高变化，可用
background-size: 3% 3%（相对单位），但得测试最小宽度下是否仍清晰
移动端点击区域变小？记得加 pointer-events: none
伪元素默认会拦截点击事件，尤其当它覆盖在按钮或链接右上角时，用户点一下可能没反应 —— 不是代码错了，是 ::after 把点击吃掉了。
这不是 bug，是规范行为。解决方式极简，但很容易被忽略。
- 给
::after加pointer-events: none，让点击穿透到下层 - 别给
::before加，除非它也盖住了可交互区域 - 如果折角本身需要响应点击（比如作为关闭按钮），那就不能关
pointer-events，得换方案：用真实元素 +z-index分层
折角看着小，但定位、缩放、交互三者一碰上，就容易漏掉其中一环。尤其是 pointer-events 和 background-position 的组合，改一处常牵动两处。
