<body>
<div class="container">
<div class="bar"></div>
<div class="curve">
<div class="curve-inner"></div>
</div>
</div>
<div class="absolute-box"></div>
</body>
<style>
body {margin: 0; background: #F3AC3C;}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bar, .curve {background: #998235;}
.bar {
height: 1.1rem;
width: 5rem;
transform: translate(0, 0.45rem);
}
.curve {
width: 6.65rem;
height: 5.9rem;
border-radius: 0 0 2rem 2rem;
display: flex;
align-items: end;
transform: translate(-1.75rem);
}
.curve-inner {
background: #F3AC3C;
height: 4.95rem;
width: 3.05rem;
margin: 0.46rem;
border-radius: 0 0 3rem 3rem;
}
.absolute-box {
position: absolute;
top: 0;
height: 5rem;
width: 5rem;
background: #F3AC3C;
transform: translate(5rem, 5.9rem);
}
</style>