CSS具有两个圆形边的透明曲线形状

我正在尝试创建内部弯曲的透明形状，就像这样

但是我在创建这种曲线形状时遇到了麻烦，这就是我所做的`

正文{
背景色：#00a4ffb3；
}
.父级\u包装器{
高度：250px；
宽度：250px；
位置：相对位置；
背景色：白色；
}
.选项卡指示器{
位置：绝对位置；
背景色：#000000；
宽度：50px；
高度：60px；
边界半径：50px 0 50px；
z指数：1；
变换：translateY（0px）；
右：0px；
转变：转变。3秒放松；
}
.选项卡指示器。选项卡指示器左侧，
.选项卡指示器.选项卡指示器右侧{
背景色：#000000；
高度：25px；
宽度：25px；
位置：绝对位置；
}
.制表符指示器.制表符指示器左侧{
右：0；
底部：-24px；
}
.tab-indicator.data-white.tab-indicator left:之后，
.tab-indicator.data-white.tab-indicator right:之后{
背景色：#F3；
}
.制表符指示器.左侧制表符指示器：之后{
宽度：100%；
身高：100%；
页边顶部：1px；
}
.制表符指示器.制表符指示器左侧：之后，
.选项卡指示器.选项卡指示器右侧：之后{
内容：“；
显示：块；
背景色：#F3；
}
.制表符指示器.左侧制表符指示器：之后{
边界半径：0 25px 0 0；
}
.选项卡指示器。选项卡指示器左侧，
.选项卡指示器.选项卡指示器右侧{
背景色：#000000；
高度：25px；
宽度：25px；
位置：绝对位置；
}
.选项卡指示器.选项卡指示器右侧{
右：0；
顶部：-24px；
}
.选项卡指示器.选项卡指示器右侧：之后{
宽度：100%；
身高：100%；
页边顶部：-1px；
}
.选项卡指示器.选项卡指示器右侧：之后{
边界半径：0px 0px 25px 0px；
}

这里有一个使用
径向梯度的想法


.box{
边缘顶部：120px；
宽度：200px；
高度：100px；
背景：白色；
}
.盒子，上面{
高度：100px；
宽度：150px；
转换：translateY（-100%）；
位置：相对位置；
背景：#fff；
}
.托普：以前，
.托普：之后{
内容：“；
位置：绝对位置；
排名：0；
宽度：50px；
左：100%；
底部：50%；
背景：
径向梯度（左上角100%50%，右上角#fff 98%，透明100%），
径向梯度（右下100%50%，透明98%，#fff 100%）左侧；
背景大小：50%100%；
背景重复：无重复；
}
.托普：之后{
变换原点：底部；
变换：scaleY（-1）；
}
身体{
背景：粉红色；
}

这里有一个使用
径向梯度的想法


.box{
边缘顶部：120px；
宽度：200px；
高度：100px；
背景：白色；
}
.盒子，上面{
高度：100px；
宽度：150px；
转换：translateY（-100%）；
位置：相对位置；
背景：#fff；
}
.托普：以前，
.托普：之后{
内容：“；
位置：绝对位置；
排名：0；
宽度：50px；
左：100%；
底部：50%；
背景：
径向梯度（左上角100%50%，右上角#fff 98%，透明100%），
径向梯度（右下100%50%，透明98%，#fff 100%）左侧；
背景大小：50%100%；
背景重复：无重复；
}
.托普：之后{
变换原点：底部；
变换：scaleY（-1）；
}
身体{
背景：粉红色；
}