You can adjust your code like below:
.box {
margin-top:90px; /* make it at lealst the same as the height of the pseudo element */
width:200px;
height:100px;
background:white;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
bottom:100%;
width:50%;
left:0;
height:80px; /* adjust this to control the height */
background:
radial-gradient(50% 100% at bottom left, #fff 98%,#0000) top,
radial-gradient(50% 100% at top right , #0000 98%,#fff) bottom;
background-size:100% 50%;
background-repeat:no-repeat;
}
.box:after {
transform-origin:right;
transform:scaleX(-1);
}
body {
background:pink;
}
<div class="box">
</div>