CSS伪元素模拟纸张折角效果_利用渐变与定位实现

用::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 的组合，改一处常牵动两处。