curved div with transparent top - html

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 {
clip-path: circle(72.9% at 50% 27%);
height: 200px;
width: 200px;
background: url(https://picsum.photos/id/10/800/800) center/cover;
position: relative;
}
.first .bottom {
margin-top: -70px;
background: yellow;
height: 100px;
width: 200px;
}
.second .top {
height: 200px;
width: 200px;
background:url(https://picsum.photos/id/10/800/800) center/cover;
position: relative;
}
.second .bottom {
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(100% 100% at top, #0000 60%, yellow 61%),
url(https://picsum.photos/id/10/800/800) center/cover;
}
<div class="first">
</div>
Using mask if you want transparency:
.first {
height: 200px;
width: 400px;
background: url(https://picsum.photos/id/10/800/800) center/cover;
-webkit-mask:radial-gradient(100% 100% at top, #fff 60%, #0000 61%);
mask:radial-gradient(100% 100% at top, #fff 60%, #0000 61%);
}
.bottom {
-webkit-mask:radial-gradient(100% 100% at top, #0000 60%, #fff 61%);
mask:radial-gradient(100% 100% at top, #0000 60%, #fff 61%);
}
body {
background:yellow;
}
<div class="first">
</div>
<div class="first bottom">
</div>

Answer 2

If you want to overlay top and bottom, just use clip path both ways (on the top or bottom element).`
.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;
}

Answer 3

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