如何创建带有圆角和固定宽度箭头提示的 CSS 按钮？

Question

我正在努力创建一个具有这些特定要求的 CSS 按钮：

1. 矩形机身，带有平滑的圆角角。
2. 右侧有三角形箭头。
3. 箭头尖端应具有 20px 的固定宽度，无论 按钮的整体宽度。
4. 按钮应该灵活以适应不同长度的文本 （包括潜在的换行符）。

这是我当前的代码。我使用

clip-path

在按钮右侧创建箭头形状，将箭头尖端设置为距按钮 100% 宽度固定的 20px 宽度。为了避免文本与箭头重叠，我相应地调整了填充。

    .cta-button {
    display: inline-block;
    padding: 10px 30px 10px 10px;
    background-color: #004c97;
    color: #ffffff;
    font-family: Arial;
    font-size: 14px;
    text-align: center;
    border: none;
    cursor: pointer;
    line-height: 1.2;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
    border-radius: 10px;
}

这个设置基本上可以满足我的需要，但是有一个问题：我无法在箭头本身上获得圆角效果。通常，我会使用

border-radius

属性，但由于它适用于整个

div

元素，因此它不会影响

clip-path

创建的形状。这样只剩下左边的角是圆的。

我还尝试使用 SVG 路径来实现圆角效果。然而，通过这种方法，箭头尖端会随着按钮大小而缩放，随着按钮变长，箭头会变得更加尖锐。

有没有办法：

1. 实现整个按钮的平滑圆角，包括箭头尖端，并且
2. 保持箭头尖端 20px 的固定宽度，与按钮的总长度无关？

任何实现固定大小箭头和平滑圆角的解决方案或解决方法都会非常有帮助！谢谢你。

Answer 1

提供的代码有效（请参阅下面的演示）

您可以添加一个[mre]来重现您所描述的问题吗？

（mods，一旦OP提供更多细节，我就会删除答案；我添加这个只是为了说明提供的代码的工作原理）

.cta-button {
  display: inline-block;
  padding: 10px 30px 10px 10px;
  background-color: #004c97;
  color: #ffffff;
  font-family: Arial;
  font-size: 14px;
  text-align: center;
  border: none;
  cursor: pointer;
  line-height: 1.2;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
  border-radius: 10px;
}

<button class="cta-button">
Click on this very large button.

Even if I add more text, I still work
</button>