效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
body > div {
width: 120px;
position: relative;
}
body > div:nth-child(1) {
height: 50px;
background: #A4CC38;
border-radius: 50% 50% 0 0/100% 100% 0 0;
}
body > div:nth-child(1):after, body > div:nth-child(1):before {
content: '';
background: white;
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
margin-top: -8px;
border-radius: 50%;
}
body > div:nth-child(1):after {
right: 25%;
}
body > div:nth-child(1):before {
left: 25%;
}
body > div:nth-child(2) {
height: 100px;
background: #A4CC38;
margin-top: 5px;
border-radius: 0 0 10px 10px;
}
body > div:nth-child(2):after, body > div:nth-child(2):before {
content: '';
background: #A4CC38;
display: block;
width: 20px;
height: 80px;
position: absolute;
top: 10px;
margin-top: -8px;
border-radius: 5px;
}
body > div:nth-child(2):after {
right: -26px
}
body > div:nth-child(2):before {
left: -26px
}
body > div:nth-child(3) {
height: 50px;
}
body > div:nth-child(3):after, body > div:nth-child(3):before {
content: '';
background: #A4CC38;
display: block;
width: 20px;
height: 30px;
position: absolute;
top: 10px;
margin-top: -8px;
border-radius: 0 0 5px 5px;
}
body > div:nth-child(3):before {
left: 10%;
}
body > div:nth-child(3):after {
right: 10%;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>