curved div with transparent top

Question

I'm trying to create transparent div full width and height around 500px using borders but i have trouble with creating this kind of curved shape. It should look like on the example image, the yellow shape.

.transparent_bg {
    width: 100%; 
    height: 485px;  
    background: transparent;
    border:solid 5px #000;
    border-color:#000 transparent transparent transparent;
    border-radius: 50%/200px 200px 0 0;
    transform: rotate(180deg);
    position: relative;
    overflow:hidden;
}

.transparent_bg:after {
    content: "";
    width: 100%;
    height: 485px;
    position: absolute;
    top: 0;
    background: red;
}

<div class="transparent_bg"></div>

I have included a link to my work until this moment but without success.

Answer 1

You can use clip path in both ways (on the top element or the bottom one) and simply make top and bottom to overlay like this :

.first,
.second {
  display: inline-block;
  margin: 5px;
}

.first .top {
  -webkit-clip-path: circle(72.9% at 50% 27%);
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background-image: url(https://lorempixel.com/800/600/);
  position: relative;
  z-index: 99;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

.second .top {
  height: 200px;
  width: 200px;
  background-image: url(https://lorempixel.com/800/400/);
  position: relative;
  z-index: -9;
}

.second .bottom {
-webkit-clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

<div class="first">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

<div class="second">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

Here is a useful link to generate path :

https://bennettfeely.com/clippy/

---

Here is another idea using radial-gradient

.first  {
  height: 200px;
  width: 400px;
  background: 
    radial-gradient(ellipse at top, transparent 60%, yellow 61%) top/120% 100%, 
    url(https://lorempixel.com/800/600/);
  
}

<div class="first">
  
</div>

Answer 2

.transparent_bg {
    width: 100%; 
    height: 485px;  
    background: transparent;
    border-top-left-radius: 50% 50%;
    border-top-right-radius: 50% 50%;
    transform: rotate(180deg);
    position: relative;
    overflow:hidden;
}

.transparent_bg:after {
    content: "";
    width: 100%;
    height: 485px;
    position: absolute;
    top: 0;
    background: red;
}

<div class="transparent_bg"></div>