Google photo Icon in CSS

CSS Code

*{
padding:0;
margin:0;
}

body {
width:100%;
height:100vh;
background:#f6f6f6;
display:flex;
justify-content:center;
align-items:center;
}

.center{
width:300px;
height:300px;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}

.red {
width:80px;
height:40px;
background:red;
position:absolute;
border-radius:50px 50px 0px 0px;
transform:rotate(90deg);
}

.yellow {
width:80px;
height:40px;
background:#E5D900;
position:absolute;
border-radius:50px 50px 0px 0px;
transform:rotate(0deg);
left:16.50%;
top:50%;
}

.green {
width:80px;
height:40px;
background:#03AE00;
position:absolute;
border-radius:50px 50px 0px 0px;
transform:rotate(270deg);
left:23.24%;
top:70.1%;
}

.sky {
width:80px;
height:40px;
background:#008CFF;
position:absolute;
border-radius:50px 50px 0px 0px;
transform:rotate(180deg);
left:43.40%;
top:63.42%;
}

HTML Code

<div class="center">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="sky"></div>
</div>