如何在SCSS中实现带有“UND”文本的蓝色弧形效果？

不用clip-path，改用border-radius配合绝对定位就能轻松做出这种弧形效果，下面是整合红色价格标签的完整实现代码：

<div class="price-badge-container">
  <div class="price-tag">€9,99</div>
  <div class="arc-label">UND</div>
</div>

.price-badge-container {
  position: relative;
  width: 80px; /* 根据你的红色标签大小调整 */
  text-align: center;
}

/* 红色圆形价格标签（保留你已有的样式，这里做示例） */
.price-tag {
  width: 60px;
  height: 60px;
  background-color: #e63946;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
  margin: 0 auto;
}

/* 蓝色弧形标签 */
.arc-label {
  position: absolute;
  bottom: -12px; /* 调整和红色标签的间距 */
  left: 0;
  right: 0;
  height: 25px;
  background-color: #457b9d;
  /* 关键：用大圆角实现弧形 */
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  color: white;
  font-size: 12px;
  line-height: 25px; /* 垂直居中文本 */
}

关键说明： #

• 给容器设置position: relative，让弧形标签可以基于容器绝对定位
• 弧形标签的左右下圆角值要大于自身宽度的一半，才能形成圆润的弧形轮廓
• 调整bottom值控制弧形与红色标签的贴合度，调整height和圆角值可改变弧形的弧度

你可以直接把这段弧形标签的CSS替换掉之前用clip-path的尝试代码，就能得到目标UI效果。

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