浮动具有透明背景的内部标签

Question

我想创建一个像这样的菜单： https://imgur.com/ZKE9wRO

这是我创建的，但问题是背景不透明https://imgur.com/GBMxpYN

这两个例子不是我想要的 1。CSS Cut out circle from a rectangular shape Transparent half circle cut out of a div

我希望所有侧面都是弯曲的。

.tab-indicator {
  position: absolute;
  background-color: #000000;
  width: 50px;
  height: 60px;
  border-radius: 50px 0 0 50px;
  z-index: 1;
  transform: translateY(0px);
  right: 0px;
  transition: transform .3s ease-out;
}

tab-indicator .tab-indicator-left,
.tab-indicator .tab-indicator-right {
  background-color: #000000;
  height: 25px;
  width: 25px;
  position: absolute;
}

.tab-indicator .tab-indicator-left {
  right: 0;
  bottom: -24px;
}

.tab-indicator .tab-indicator-left:after {
  width: 100%;
  height: 100%;
  margin-top: 1px;
}

.tab-indicator .tab-indicator-left:after,
.tab-indicator .tab-indicator- right:after {
  content: "";
  display: block;
  background-color: #F3F3F3;
}

.tab-indicator .tab-indicator-left:after {
  border-radius: 0 25px 0 0;
}

.tab-indicator .tab-indicator-left,
.tab-indicator .tab-indicator-right {
  background-color: #000000;
  height: 25px;
  width: 25px;
  position: absolute;
}

.tab-indicator .tab-indicator-right {
  right: 0;
  top: -24px;
}

<div class="tab-indicator">
  <div class="tab-indicator-left"></div>
  <div class="tab-indicator-right"></div>
</div>

是否可以使用SVG或CSS进行这样的菜单？