如何向 HTML div 添加透明凹槽？

如何解决如何向 HTML div 添加透明凹槽？

我需要工作流组件的特殊形状。这是我同事的解决方案。

.workflow-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%; 
}
.item-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: green;
  flex-shrink: 0;
  border: 1px solid yellow;
}
     
.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-left: 40px;
  margin-left: -40px;
  border-left: none;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px; 
  background: radial-gradient(
  circle at 0px 20px,rgba(0,0) 25px,red 25px)
  20px 0px no-repeat;
}

<div class="workflow-item">
  <div class="item-no"></div>
  <div class="content">
    <div class="item-text"></div>  
  </div>
</div>
<div class="connection"></div>

    

问题是右侧形状的凹槽是通过使用左侧白色的径向渐变制成的。但是我们不知道背景的颜色。所以我试图用 CSS clip-path 和/或 mask 创建这个特殊的形状，但我没有做对。

如何创建右侧的形状以使其适用于任何背景？