我想能夠圓出這個形狀的最左邊的3個角，我已經創建了，有什么想法可以做到這一點嗎？

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

<div></div>

使用帶有圓形屬性的插圖:

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

一個SVG過濾器可以繞過任何種類的剪輯路徑。您只需要將它應用到父元素。調整標準偏差以控制半徑:

.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>

我最近發現嘗試這樣的方法很成功...

挽救（saving的簡寫）

<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>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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

我發現與使用溢出設置為隱藏的border-radius相比，這很有用，因為這種方法不會創建BFC或破壞像粘性位置和css透視效果這樣的東西。此外，這允許您“插入”svg路徑的位置，以便在元素內部裁剪一個“圓角半徑”。

你也可以亂動圓圈來獲得一些不同的效果。

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

密碼筆

可惜你不能把多邊形和圓形結合起來...或者也許你可以，但我還沒玩夠去弄明白。希望這能幫上忙

剪輯路徑:嵌入(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作為評論人在這里..:)

你可以使用一個子元素，并在這個子元素和子元素的偽元素上做一個嵌套的剪輯路徑。父對象將首先在形狀上做多邊形剪輯，然后偽對象將有一個橢圓來環繞邊界。這些剪輯將具有組合效果。

.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>