效果展示：
知识点：
1.伪元素选择器.head::before,.head::after {}
一定要加content: ;
2.设置圆角
border-radius: 50%;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.content {
width: 400px;
height: 430px;
border:1px solid red;
position: relative;
}
.head {
width: 200px;
height: 100px;
background: green;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
margin:10px auto;
position: relative;
}
.head::before,
.head::after {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
position: absolute;
top:50px;
left: 40px;
}
.head::after {
left: 126px;
}
.body {
height: 200px;
width: 200px;
background: green;
margin: 10px auto;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
}
.body:before,
.body:after {
content: "";
height: 140px;
width: 24px;
border-radius: 10px;
background: green;
position: absolute;
top:20px;
left: -40px;
}
.body:after {
left:220px;
}
.left,.right {
height: 100px;
width: 20px;
background: green;
border-radius: 10px;
position: absolute;
left:140px;
top:310px;
}
.right {
left: 230px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="content">
<div class="head"></div>
<div class="body"></div>
<div class="foot">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
本文属个人学习整理记载