<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<style>
body {
margin: 0;
background: #1a4341;
display: flex;
flex-wrap: wrap;
}
div {
width: 50%;
height: 50%;
background: #f3ac3c;
}
.one {
border-radius: 0 0 100px 0;
}
.two {
border-radius: 0 0 0 100px;
}
.three {
border-radius: 0 100px 0 0;
}
.four {
border-radius: 100px 0 0 0;
}
</style>
<a><a b><a c><a d><style>body{margin:0;background:#1a4341;display:flex;flex-wrap:wrap}a{width:50%;height:50%;background:#f3ac3c;border-radius:0 0 100px 0}[b]{border-radius:0 0 0 100px}[c]{border-radius:0 100px 0 0}[d]{border-radius:100px 0 0 0