如何创建具有 6 个边和边框半径的响应式按钮？

Question

是否可以创建一个具有边框半径的 6 边形按钮，同时仍保持其响应性和可扩展性，具体取决于文本的长度？

我试过 clip-path: polygon() 但它不包括角落的边界半径和其他解决方案，包括使用 ::before ::after 伪元素剪裁角落但如果我有渐变或图像背景以及不包括边界半径。

有什么办法可以实现这种形状：

Answer 1

这对我来说很好，试一试。

div {
  height:250px;
  width:750px;
  background:orange;
  clip-path: polygon(88% 0, 100% 50%, 100% 100%, 12% 100%, 0 50%, 0% 0%);
  border-radius:25px;
}