<div class="semi">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="bar"></div>
<div class="bar"></div>
<style>
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FADE8B;
}
div {background: #48BF7D}
.semi {
height: 3rem;
width: 6rem;
border-radius: 3rem 3rem 0 0;
display: flex;
justify-content: center;
align-items: end;
gap: 1.5rem;
}
.bar {
width: 8.75rem;
height: 2.55rem;
border-radius: 1.5rem;
}
.dot {
background: #FFFFFF;
width: 1rem;
height: 1rem;
border-radius: 1rem;
transform: translateY(0.25rem);
}
</style>