CSS折角标签实现方法：利用伪元素投影叠加

CSS折角标签的实现精髓在于巧妙分离视觉层与阴影层：用::before伪元素通过border技巧绘制并旋转三角形作为翻起的角面，再用::after伪元素独立创建精准裁剪的偏移投影，避免旋转导致阴影歪斜、溢出或渲染失真；这种双层结构不仅解决了box-shadow在transform下的方向错乱和兼容性问题，还兼顾了高DPR屏幕适配、屏幕阅读器可访问性及性能稳定性，让看似简单的“小角落”真正经得起多端、多场景、多用户的严苛考验。

折角标签的底层原理是什么

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 会触发合成层，大量使用可能增加内存占用，尤其在列表项中批量渲染时

真正难的不是画出那个角，而是让它的位置、阴影、缩放、语义在各种设备和辅助工具里都稳得住。

本篇关于《CSS折角标签实现方法：利用伪元素投影叠加》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！