<p>推荐用 clip-path: polygon() 配合 lh 单位实现响应式丝带角标，1lh = 当前行高，比固定像素更可靠；混用 1lh、calc(100% - var(--r)) 和百分比可自适应折叠角度与留白，须加 overflow: hidden 防旧版 Safari 渲染异常。</p>
用 clip-path 做响应式丝带角标最稳
固定宽高 + border 三角拼接的老方案，在文字长度变化或缩放时容易错位、溢出。现在推荐用 clip-path: polygon() 配合 lh 单位，让丝带形状随行高自适应。
关键点：
-
lh是 CSS 新单位（line-height relative），1lh = 当前元素的行高，比写死像素更可靠 - 多边形顶点坐标里混用
1lh、calc(100% - var(--r))和百分比，能同时控制折叠角度和上下留白 - 必须给容器加
overflow: hidden，否则clip-path切掉的部分可能在某些浏览器（如旧版 Safari）仍显示阴影或伪元素
示例片段：
.ribbon {
--r: 16px;
line-height: 1.8;
padding-inline: 1.2lh calc(var(--r) + .2lh);
background: #ff6b6b;
clip-path: polygon(
1lh 0,
100% 0,
calc(100% - var(--r)) 50%,
100% 100%,
1lh 100%,
1lh calc(100% + var(--r)),
0 calc(100% + var(--r)),
0 100%
);
}
:before 和 :after 旋转法适合右上角固定位置
如果丝带只放在右上角、且内容固定（比如版本号 v5.17.0），用 transform: rotate(45deg) 搭配绝对定位最省事，兼容性也更好（IE11 都能跑）。
立即学习“前端免费学习笔记（深入）”；
常见翻车点：
- 没设
position: relative在父容器上，导致top/right失效 -
rotate(45deg)后元素中心偏移，要用transform-origin调整锚点，否则看起来歪斜 - 文字被旋转后变模糊？加
backface-visibility: hidden或-webkit-font-smoothing: antialiased
简写结构：
.ribbon-wrapper {
position: relative;
}
.ribbon {
position: absolute;
top: -8px;
right: -8px;
transform: rotate(45deg);
transform-origin: center;
padding: 4px 12px;
background: #1677ff;
color: white;
font-size: 12px;
}Ant Design 的 .ant-ribbon 类不能直接复用
它依赖内部组件结构（比如 .ant-ribbon-corner 是个独立 <div>），且硬编码了 inset-inline-end、filter: brightness(75%) 等现代属性。直接拷代码到普通 HTML 会漏样式、缺定位。
想轻量复刻它的视觉逻辑，只需关注三点：
- 主色块用
position: absolute+top/right定位 - 右下角小三角用
:after+border构造，border-inline-end-color: transparent控制方向 - 加
box-shadow模拟微立体感，别依赖filter（低版本 Chrome 不支持）
移动端适配时 em 和 rem 比像素更安全
用户缩放页面或系统字体调大时，写死 16px 的丝带会突然变小或压扁。用 em（相对于父字体大小）或 rem（相对于根字体）能保持比例。
实操建议：
- 把
--r、padding、line-height全部换成em，例如--r: 1em - 避免在
clip-path里混用px和%，统一用相对单位 - 真机测试时重点看 iOS Safari —— 它对
clip-path的渲染有延迟，有时首屏闪一下才切好
真正难的不是画出丝带，而是让它在文字换行、字号切换、横竖屏切换时都不崩形。优先选 clip-path + lh 方案，但得接受 IE 完全不支持；要保底就用旋转法，再加一层媒体查询兜底。
