svg - CSS transparent curved shape with two rounded sides

Question

I'm trying to create inner curved transparent shape,like this

but i have trouble with creating this kind of curved shape,this is what i am done`

body {
  background-color: #00a4ffb3;
}

.parent_wrapper {
  height: 250px;
  width: 250px;
  position: relative;
  background-color: white;
}

.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.data-white .tab-indicator-left:after,
.tab-indicator.data-white .tab-indicator-right:after {
  background-color: #F3F3F3;
}

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

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

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

<div class="parent_wrapper">
  <div class="tab-indicator data-white" style="transform: translateY(25px);">
    <div class="tab-indicator-left"></div>
    <div class="tab-indicator-right"></div>
  </div>
</div>

question from:https://stackoverflow.com/questions/66065709/how-to-make-a-side-menu-with-rounded

Answer 1

Here is an idea using radial-gradient

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}
.box .top {
  height:100px;
  width:150px;
  transform:translateY(-100%);
  position:relative;
  background:#fff;
}

.top:before,
.top:after{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
}
.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}
body {
  background:pink;
}

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