用css伪元素+边框三角形+分层渐变阴影可实现轻量撕页翻角效果，关键在::before画白色右下三角、::after叠径向高光、父容器设relative、border四边声明带单位、pointer-events:none防误触。
直接用 CSS 画三角形 + 渐变遮罩就能做出「撕页翻角」效果，不需要 Canvas 或 JS 动画。关键不是模拟物理翻页，而是用视觉欺骗营造纸张被掀开的错觉。
用 ::before 和 ::after 伪元素画左上角翻角
这是最轻量、兼容性最好、也最容易调试的方式。核心是利用边框技巧生成三角形，再叠加阴影和渐变模拟纸张翘起感。
-
::before画一个右下指向的白色三角形，作为“翻起的角”本体 -
::after叠在它下方，用半透明白色+径向渐变模拟高光，让角看起来有厚度 - 父容器必须设
position: relative，否则伪元素会脱标乱飘 - 三角形尺寸建议控制在
12px ~ 18px，太大显得假，太小不明显
border 边框三角形写法必须带单位且四边非零
很多人复制代码后翻角不显示，八成卡在 border 写法上。CSS 三角形本质是把三边设为透明色、一边设为实色并隐藏溢出，但浏览器对边框值极其敏感。
- 错误写法：
border-right: 15px solid transparent;—— 没问题；但若写成border-right: 15 solid transparent（漏了px），整条规则失效 - 必须四边都声明，哪怕其中三边是
transparent，否则某些旧版 Safari 会忽略 - 推荐固定模板：
content: ""; display: block; width: 0; height: 0; border-top: 16px solid transparent; border-right: 16px solid #fff; border-bottom: 0 solid transparent; border-left: 0 solid transparent;
阴影和渐变要分层叠加，不能只靠 box-shadow
单靠 box-shadow 做翻角阴影会发虚、边缘漂移，尤其在高清屏上明显失真。真实感来自两层叠加：
- 底层：用
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.15))给伪元素加柔和投影（比box-shadow更贴合形状） - 上层：用
background: radial-gradient(circle at 80% 80%, rgba(255,255,255,0.7) 0%, transparent 70%)模拟纸张受光面反光 - 注意：
radial-gradient的at坐标要偏右下，否则高光位置像贴在平面上，毫无翘起感
广告位里加翻角必须防误触和响应式断裂
广告容器常带 click 跳转，而翻角区域如果没处理好，用户点到三角形上会触发空白跳转或无响应——这不是 bug，是 DOM 层级没理清。
- 翻角伪元素必须设
pointer-events: none，确保点击穿透到底层广告内容 - 响应式断点处（如
@media (max-width: 768px)）要重置翻角尺寸，否则在手机上可能盖住 CTA 按钮 - 如果广告本身是
iframe嵌入（如微信公众号页），翻角必须挂载在 iframe 外层容器上，iframe 内无法注入伪元素 - 避免在
body或html上直接加翻角：部分安卓 WebView 会因 transform 触发渲染异常，导致广告图闪烁
真正难的不是画出那个角，而是让它在各种广告平台、各种设备缩放比例、各种嵌入方式下都不穿帮。多数人调完 Chrome 就上线，结果 iOS 微信里高光错位、安卓 UC 浏览器里阴影消失——这些细节不跑真机根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
