css battle i scored 100 % number 2
<body>
<div class="A"></div>
<div class ="B"></div>
<div class ="C"></div>
<div class ="D"></div>
<style>
.A {
height: 100px;
width: 50px;
background: #F9E492;
border-radius:0 90px 90px 0;
transform: rotate(-90deg);
position:absolute;
top:75;
left:125;
}
.B {
height: 100px;
width: 50px;
background: #4F77FF;
border-radius:0 90px 90px 0;
transform: rotate(-0deg);
position:relative;
top:-50;
left:50;
}
.C {
height: 100px;
width: 50px;
background: #F9E492;
border-radius:0 90px 90px 0;
transform: rotate(90deg);
position:relative;
top:25;
left:25;
}
.D {
height: 100px;
width: 50px;
background: #4F77FF;
border-radius:0 90px 90px 0;
transform: rotate(180deg);
position:absolute;
top:150;
left:150;
}
body{
background-color:#191919;
display: flex;
justify-content:center;
align-items:center;
}
</style>
</body>