How to create a curve on the top of a background?

问题

Please help me change the cutout from .top so that it is on top and not on the right. As shown in the image. Thank you very much in advance. I really hope for your help, I'm new to this business. Source code: Source code

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

回答1:

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%,transparent 100%) top,
    radial-gradient(50% 100% at top right  , transparent 98%,#fff 100%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  transform-origin:right;
  transform:scaleX(-1);
}
body {
  background:pink;
}

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

来源：https://stackoverflow.com/questions/61443008/how-to-create-a-curve-on-the-top-of-a-background