.block {
background-color: #fff;
}
<div class="bg-outer b1">
<div class="bg-top"></div>
<div class="bg-inner">Test</div>
</div>
html {
min-height: 100%;
background-color: #fff;
}
.bg-outer {
overflow: hidden;
position: relative;
display: inline-block;
margin: 50px;
vertical-align: top;
font-size: 2em;
color: #fff;
}
.b1 {
width: 400px;
}
.b2 {
width: 250px;
}
.b1 .bg-top {
box-shadow: 0 0 0 1000px #669;
}
.b2 .bg-top {
box-shadow: 0 0 0 1000px #c33;
}
.bg-inner {
position: relative;
padding: 30px 30px 50px;
}
.bg-top {
position: absolute;
top: 100%;
left: 50%;
width: 500%;
border-radius: 50%;
transform: translate(-50%, -1%);
}
.bg-top:before {
content: "";
display: block;
padding: 100% 0 0;
}