Изменить фоновое местоположение css

Question

Пожалуйста, помогите мне изменить вырез из .top, чтобы он был сверху, а не справа. Как показано на рисунке. Заранее большое спасибо. Я очень надеюсь на вашу помощь, я новичок в этом бизнесе. Исходный код: Исходный код

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

Answer 1

Вы можете настроить свой код, как показано ниже:

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