HTML怎么做CSS丝带角标_HTML CSS丝带角标ribbon效果【干货】-html教程-PHP中文网

推荐用 clip-path: polygon() 配合 lh 单位实现响应式丝带角标，1lh = 当前行高，比固定像素更可靠；混用 1lh、calc(100% - var(--r)) 和百分比可自适应折叠角度与留白，须加 overflow: hidden 防旧版 safari 渲染异常。

html怎么做css丝带角标_html css丝带角标ribbon效果【干货】

用 `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 都能跑）。

常见翻车点：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

没设 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;
}