使用带圆角属性的inset：

inset(0% 45% 0% 45% round 10px)

我最近发现用这种方法取得的成功...
SVG图形发生器

<svg width="0" height="0">
  <defs>
    <clipPath id="clipped">
      <circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
      <circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
      <rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
      <rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
    </clipPath>
  </defs>
</svg>

中央支助系统

.clipped {
  --myWidth: 100vw;
  --myHeight: 10rem;
  --myRad: 2rem;
  clip-path: url(#clipped);
}

我发现这比使用border-radius并将overflow设置为hidden更有用，因为这种方法不会创建BFC，也不会破坏粘性位置和css透视效果，而且，如果你愿意，它允许你“插入”svg路径的位置，以便在元素内部使用“corner-radius”进行剪辑。

SVG过滤器可以对任何类型的clip-path进行舍入。您只需将其应用于父元素。调整stdDeviation以控制半径：

.box {
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.parent {
  filter: url('#goo');
  overflow:hidden;
  position: fixed;
  right:-50px;
  z-index: 1;
  margin-top: 10vw;
}

<div class="parent">
  <div class="box"></div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

相关：https://stackoverflow.com/a/65485455/8620333

你也可以乱来的圆圈，以获得一些不同的效果。

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

Codepen
可惜你不能把多边形和圆结合起来......或者你可以，但我还没有玩够它来弄明白。HTH

剪辑路径：插入（45% 0% 33% 10%约10px）

我没有一个评论选项是的，所以我写它作为一个答案。
你需要写尽可能多的点来圆角。没有别的...例如，多写几个点来使下部位更圆：

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);

哦，是的，或者SVG作为评论的人在这里。：）

你可以使用一个子元素，并在它和子元素的伪元素上嵌套一个clip-path。父元素会先在形状上做一个polygon剪辑，然后伪元素会有一个ellipse来圆化边界。剪辑会有一个组合效果。

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
  margin-top: 15vh;
}

.parent div {
  clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}

<div class="parent">
  <div></div>
</div>

下面是经过一些调整的演示，以说明正在发生的事情：
一个二个一个一个
椭圆的水平大小和位置可用于在边缘上获得不同的效果。请注意，父对象的背景起始位置需要调整为与椭圆放置位置相同的值（clip-path中的最后一个值），因为它会填充右侧被剪切掉的内容。在第二个演示中，可以通过从.parent div中删除background-color: blue来直观地显示这一点。
Here是一个额外的Codepen，用于尝试它。