如何用CSS创建单侧倾斜、响应式丝带并解决边框失效问题？

我需要创建单侧倾斜的丝带，要求在移动端具备响应性，且内部文本长度可灵活变化。目前尝试了两种方案：

方案一：背景SVG实现 #

代码如下：

<style>
  .box {
    height: auto;
    border: 2px solid green; 
    border-radius: 0 5px 5px 0;
    margin: 5px;
    background:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" preserveAspectRatio="none"><polygon points="16,17 16,-2 0,-1" fill="yellow" stroke="green" /></svg>') bottom right/30px 100%,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" preserveAspectRatio="none"><polygon points="16,16 16,-2 0,16" fill="white" stroke="white" /></svg>') bottom right/0px 0%,
      yellow content-box;
    background-repeat: no-repeat;
    font-size: 3em;
  }
</style>

对应的HTML：

<div class="box">Reinventing Growth Opportunities</div>

该方案的问题：SVG背景尺寸需手动调整，文本长度或容器高度变化时无法自适应，边框连贯性难以保证，维护成本高。

方案二：伪元素实现（边框异常） #

HTML代码：

<h4 class="ribbon">Reinventing Growth Opportunities</h4>

CSS代码：

.ribbon {
    position: relative;
    background-color: #4c6fff;
    color: white;
    padding: 0.5em 2em;
    display: inline-block;
    margin-bottom: 1em;
    /* border: 3px solid black; */
}

.ribbon::before {
    content: "";
    position: absolute;
    top: 0px;
    right: -1em;
    border-top: 2.5em solid #4c6fff;
    border-right: 1em solid transparent;
    bottom: 0em;
    overflow: hidden; 
}

该方案的问题：伪元素用边框模拟倾斜角，但原生边框无法覆盖伪元素区域，导致边框不完整；固定高度值在文本换行或字体变化时失效，响应性差。

推荐方案：CSS clip-path + 伪元素补全边框 #

此方案兼顾响应性与边框完整性，文本长度变化、容器高度调整均可自适应：

实现代码 #

<div class="tilted-ribbon">Reinventing Growth Opportunities</div>
<div class="tilted-ribbon">Short Text</div>
<div class="tilted-ribbon">This is a very long text that will wrap into multiple lines on mobile devices</div>

.tilted-ribbon {
  position: relative;
  background: #4c6fff;
  color: white;
  padding: 0.75em 2em 0.75em 1.25em;
  display: inline-block;
  margin: 0.5em 0;
  /* 通过clip-path实现右侧倾斜效果 */
  clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 50%, calc(100% - 1em) 100%, 0 100%);
  border: 3px solid #000;
  border-right: none; /* 右侧边框留空，用伪元素补全 */
}

/* 补全右侧倾斜边框 */
.tilted-ribbon::after {
  content: "";
  position: absolute;
  right: -1em;
  top: 0;
  width: 0;
  height: 0;
  border-top: calc(100% / 2) solid transparent;
  border-bottom: calc(100% / 2) solid transparent;
  border-left: 1em solid #000;
  transform: translateX(-3px); /* 对齐主元素边框 */
}

/* 补全倾斜部分的背景色 */
.tilted-ribbon::before {
  content: "";
  position: absolute;
  right: -1em;
  top: 3px; /* 避开边框区域 */
  width: 0;
  height: 0;
  border-top: calc((100% - 6px) / 2) solid #4c6fff;
  border-bottom: calc((100% - 6px) / 2) solid #4c6fff;
  border-left: calc(1em - 3px) solid transparent;
}

方案优势 #

1. 全响应适配：使用百分比与calc()计算尺寸，文本换行、容器高度变化时自动适配，移动端表现良好。
2. 边框完整连贯：主元素处理左、上、下边框，伪元素补全右侧倾斜边框与背景，视觉无断点。
3. 灵活易维护：调整clip-path中的1em可改变倾斜角度，修改颜色、内边距等属性即可适配不同设计需求。
4. 纯CSS实现：无需外部SVG或图片，加载速度快，维护成本低。

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