最稳纯CSS斜角剪切是用::before/::after伪元素遮罩而非transform剪切；关键靠三角形/梯形色块“挡”而非“剪”，需父容器设position:relative，避免Safari兼容性问题与响应式偏移。
用 ::before 或 ::after 做斜角剪切最稳
纯 CSS 实现对角剪切标签，靠 transform: skewX() 或 rotate() 容易拉伸内容、破坏文字可读性；真正干净的做法是用伪元素盖一个带斜边的遮罩层。关键不是“剪”，而是“挡”——用三角形或梯形色块挡住右上/左下角。
常见错误现象：clip-path: polygon() 看起来简洁，但在 Safari 旧版本里不支持百分比坐标，移动端经常错位；用 border 拼斜边又受限于固定宽高，响应式一动就露白边。
- 推荐场景：固定宽度的徽章类标签（如
status-badge）、按钮右上角角标 - 必须设
position: relative在父容器上，否则伪元素定位会飘走 -
::before画遮罩，::after可留作文字高亮或图标占位，别反过来
skewX(-25deg) 配合 overflow: hidden 是备选方案
如果标签内容动态长度、不能预设宽高，又不想写 clip-path 兼容性补丁，可以用父容器强制裁切 + 伪元素反向倾斜来“伪造”斜角。原理是：父盒 overflow: hidden，伪元素正常画矩形，再 skewX() 出去，只留斜边部分可见。
性能影响小，但要注意：倾斜角度越大，伪元素实际渲染区域越宽，极端情况下可能触发重排；iOS Safari 对 skew 的 subpixel 渲染偶尔有 1px 锯齿。
立即学习“前端免费学习笔记（深入）”；
- 角度建议控制在
-15deg到-30deg之间，太大会让右上角塌陷 - 伪元素
top和right值要略大于 0（比如0.2em），避免斜边紧贴边缘时出现抗锯齿漏色 - 别给伪元素加
transition，skew动画在低端机上掉帧明显
clip-path 的安全写法：用 inset() + polygon() 混用
想直接剪，就别只用 polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%) 这种写法——它在缩放或 font-size 变化时会失准。稳妥做法是主区域用 inset() 保底，斜角部分用 polygon() 微调。
兼容性现状：Chrome/Firefox/Edge 103+ 支持良好；Safari 15.4+ 开始支持 clip-path 的百分比值，但 iOS 15.6 之前仍需 -webkit-clip-path 前缀。
- 必须同时写
clip-path和-webkit-clip-path，不然 iOS 15.4 以下直接失效 - 避免在
polygon()里混用px和%，统一用vw或em更可控 - 如果标签要适配暗色模式，
clip-path本身不影响颜色，但遮罩层颜色得单独用prefers-color-scheme控制
响应式下斜角位置偏移的根本原因
多数人调试到一半发现：PC 上好好的斜角，一缩放到手机就歪了、变厚了、甚至消失了。这不是代码写错，而是斜角依赖的参照系变了——em 跟字体走，px 跟设备像素走，% 跟父容器宽高走，三者在 viewport 缩放时变化节奏不同。
最容易被忽略的一点：伪元素的 width/height 如果用 100%，而父容器没有显式 height，那它的高度其实是 0，斜边就没了。
- 斜边长度统一用
calc(1.2em * 1.414)这类与字号强关联的值，比固定12px更可靠 - 给父容器加
min-width: max-content，防止超小屏下文本换行导致宽度突变 - 真要保绝对精度，就放弃纯 CSS，用
svg内联，但那是另一条路了
