See the Pen Google Photos Logo Clone by Aditya Yadav (@codewithaditya-123) on CodePen.
Let's see its code
HTML Portion
<!DOCTYPE html>
<html lang="en">
<head>
<title>Copy To Clipboard</title>
</head>
<body>
<div class="container">
<div class="semi"></div>
<div class="semi circle"></div>
</div>
</body>
</html>
CSS Portion
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
.container{
padding: 60px 80px;
margin: 0;
}
.semi{
height: 50px;
width: 100px;
background-color: #f6b704;
border-radius: 50px 50px 0 0;
position: relative;
}
.semi::after{
position: absolute;
content: "";
height: 100px;
width: 50px;
background-color: #e54335;
left: 100px;
top: -50px;
border-radius: 0 50px 50px 0;
}
.circle{
transform: rotateZ(180deg);
left: 100px;
background-color: #4280ef;
}
.circle::after{
background-color: #34a353;
}
Thanks for reading🤞