CSS折角效果本质是用::before画旋转三角形、::after叠纯色偏移投影，分离视觉层与阴影层以避免旋转导致阴影歪斜和溢出。
折角标签的底层原理是什么
CSS 折角效果本质是用 ::before 或 ::after 伪元素画一个带旋转和裁剪的三角形，再叠加一层阴影（box-shadow）模拟纸张翻起的厚度。关键不是“画角”，而是让阴影只出现在三角形边缘——否则会看到整块伪元素的投影。
- 真实折角需要两个视觉层：上层是翻起的三角面（带背景色），下层是投影（偏移 + 模糊，但不能溢出）
-
transform: rotate()容易导致伪元素超出父容器，必须配合overflow: hidden或clip-path - 投影不能直接加在伪元素上，否则会随旋转一起歪斜；更稳妥的做法是用第二层伪元素（比如用
::after画投影，::before画三角）
用 ::before 画三角 + ::after 叠投影的实操写法
常见错误是把阴影写在同一个伪元素上，结果旋转后阴影也歪了，看起来像错位。正确做法是分离职责：
.badge {
position: relative;
padding: 8px 12px;
background: #4a6fa5;
}
.badge::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 0; height: 0;
border-top: 24px solid #4a6fa5;
border-left: 24px solid transparent;
transform: rotate(-45deg) translate(5px, -5px);
}
.badge::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 24px; height: 24px;
background: rgba(0,0,0,0.15);
transform: rotate(-45deg) translate(8px, -2px);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
-
::before负责视觉三角，用 border 技巧生成，再旋转微调位置 -
::after是纯投影层：用小方块 +clip-path切出三角投影形状，避免用box-shadow导致模糊溢出 -
translate偏移量要手动试，因为旋转中心默认是元素中点，不是右上角
为什么不用 box-shadow 直接实现投影
直接给 ::before 加 box-shadow: 2px 2px 4px rgba(0,0,0,0.2) 看似简单，但问题明显：
- 旋转后，阴影方向跟着变，不再垂直向下，看起来像光源错乱
- 边缘模糊会超出三角区域，在角落出现“毛边”
- 在 Safari 中，旋转元素的
box-shadow渲染不稳定，有时完全不显示
替代方案更可控：
- 用
::after绘制一个略大的同色块，再用filter: blur(2px)+opacity模拟软投影 - 或者干脆放弃模糊，用纯色偏移块（如上面示例），兼容性好、性能高、边缘锐利
移动端适配和可访问性容易被忽略的点
折角标签常被用在徽章、价格角标等地方，但以下两点常被跳过：
- 高 DPR 屏幕下，24px 的三角可能显得太厚，建议用
rem或em单位，或配合@media (min-resolution: 2dppx)缩小尺寸 - 屏幕阅读器会忽略
::before/::after的content: ''，如果角标含关键信息（如 “NEW”），必须用真实 DOM 元素承载文字，并用aria-label补充说明 -
transform会触发合成层，大量使用可能增加内存占用，尤其在列表项中批量渲染时
真正难的不是画出那个角，而是让它的位置、阴影、缩放、语义在各种设备和辅助工具里都稳得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
