如何在不改变ribbon位置的前提下缩小width，使其适配盒子？

你的问题出在Ribbon的宽度、形状路径（clip-path）和位置偏移（transform: translate）是强关联的，只单独修改width会破坏原有形状和位置，需要同步调整这三个部分的参数：

修改步骤及原理 #

1. 调整Ribbon基础宽度：将.ribbon-content>[class*=ribbon]中的width从10em改为你需要的尺寸（示例中改为8em）。
2. 同步修改clip-path坐标：clip-path的多边形坐标完全基于原10em宽度设计，必须按新宽度比例调整，保证丝带形状不变。
3. 修正transform偏移值：因为Ribbon是旋转45度后定位的，宽度变化会导致旋转后的偏移距离改变，需要调整translate的数值来维持原位置。

修改后的完整代码 #

.ribbon-content {
  position: relative;
}

.ribbon-content>[class*=ribbon] {
  position: absolute;
  z-index: 2000;
  line-height: 2em;
  display: block;
  width: 8em; /* 缩小后的宽度 */
  height: 2.5em;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ribbon-content>[class*=ribbon]::before,
.ribbon-content>[class*=ribbon]::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 按8em宽度调整后的clip-path坐标 */
  -webkit-clip-path: polygon(1.6em 0, 6.4em 0, 8em 2em, 8em 2.5em, 7.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
  clip-path: polygon(1.6em 0, 6.4em 0, 8em 2em, 8em 2.5em, 7.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
}

.ribbon-content>[class*=ribbon]::before {
  top: 0.1em;
  height: 1.8em;
  border: 1px dotted rgba(0, 0, 0, 0.3);
  border-left: none;
  border-right: none;
}

.ribbon-content>[class*=ribbon]::after {
  z-index: -1;
  background-color: #ff6347;
  border-bottom: 0.5em solid #505050;
  transition: background-color 0.2s ease-in-out;
}

.ribbon-content>.ribbon-top-left {
  top: 0;
  left: 0;
  /* 调整translate值维持原位置 */
  transform: translate(-3em, 1.1em) rotate(-45deg);
  color: #fff;
  font-size: 0.65rem;
}

.box {
  width: 100%;
  max-width: 20em;
  min-height: 10em;
  margin: 2em;
  background-color: #333;
}

<div class="box ribbon-content"><span class="ribbon-top-left" href="#">NEW</span></div>

自定义宽度的通用方法 #

如果需要调整为其他宽度（比如7em），可以按以下规则计算：

• clip-path中，原2em和8em对应宽度的20%和80%，新宽度下就是宽度*0.2和宽度*0.8；原10em替换为新宽度值；原9.5em替换为新宽度-0.5em。
• transform的translateX值：原10em宽度对应-3.85em，可以按比例计算（新宽度/10em * 3.85em），再微调至视觉对齐；translateY值同理按比例调整后微调。

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