HTML
<div class="wrapper">
<div class="c-1"></div>
<div class="c-2"></div>
<div class="c-3"></div>
</div>
CSS
body {
margin: 0;
background: #F5D6B4;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
position: relative;
width: 255px;
height: 100px
}
.c-1 {
width: 100px;
height: 50px;
background: #dd6b4d;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: absolute;
left: 0;
bottom: 0;
transform: rotate(180deg);
}
.c-1:after {
content: '';
width: 60px;
height: 30px;
background: #F5D6B4;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: absolute;
left: 20px;
bottom: 0;
}
.c-1:before {
content: '';
width: 20px;
height: 10px;
background: #D86F45;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: absolute;
right: 0;
bottom: -10px;
transform: rotate(180deg);
}
.c-2 {
width: 99px;
height: 50px;
background: #dd6b4d;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: absolute;
left: 80px;
top: 0;
}
.c-2:before {
content: '';
width: 55px;
height: 30px;
background: #F5D6B4;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: absolute;
left: 20px;
bottom: 0;
}
.c-3 {
width: 100px;
height: 50px;
background: #dd6b4d;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: absolute;
right: 0;
bottom: 0;
transform: rotate(180deg);
}
.c-3:after {
content: '';
width: 59px;
height: 30px;
background: #F5D6B4;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: absolute;
right: 24px;
bottom: 0;
}
.c-3:before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
width: 17px;
height: 10px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background: #D86F45;
transform: rotate(180deg);
}
Top comments (0)