如何为响应式卡片添加任意角度的自定义Ribbon角标

完全可以用纯CSS实现需求，不用依赖图片。核心是通过定位基准控制+transform旋转原点调整来解决角度偏移问题，同时通过文本不换行和相对单位实现自适应与响应式适配。

实现思路 #

• 父容器设为position: relative，作为角标的定位锚点
• 角标用absolute定位到右上角，通过transform-origin把旋转原点固定在右上角，避免旋转后位置跑偏
• 用white-space: nowrap保证文本不折行，实现长度自适应
• 用相对单位（rem）做内边距和字体大小，配合父容器的响应式宽度，自动适配不同屏幕

完整代码示例 #

HTML结构

<div class="card">
  <div class="ribbon">新品上市</div>
  <div class="card-content">
    这是响应式卡片内容，宽度会随屏幕自动调整
  </div>
</div>

CSS样式

/* 卡片容器：响应式宽度，作为角标的定位基准 */
.card {
  position: relative;
  width: 90%;
  max-width: 450px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 角标核心样式 */
.ribbon {
  position: absolute;
  top: 0;
  right: 0;
  /* 旋转15度，旋转原点固定在右上角，保证角标从该点延伸 */
  transform: rotate(15deg);
  transform-origin: top right;
  /* 内边距控制角标大小，相对单位适配缩放 */
  padding: 0.3rem 2rem;
  background: #ff4757;
  color: #fff;
  font-weight: bold;
  /* 强制文本不换行，自适应内容长度 */
  white-space: nowrap;
  /* 避免被卡片内容遮挡 */
  z-index: 10;
}

/* 小屏幕适配：缩小角标尺寸 */
@media (max-width: 360px) {
  .ribbon {
    font-size: 0.8rem;
    padding: 0.2rem 1.5rem;
  }
}

扩展优化（可选） #

如果需要更贴近传统ribbon的尖角效果，可以给角标添加伪元素实现：

.ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  /* 生成右下角的小三角，颜色与角标底色呼应 */
  border-top: 0.5rem solid #c23616;
  border-right: 0.5rem solid transparent;
}

内容的提问来源于stack exchange，提问作者Alex