效果如下：
html+css 源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>安卓 logo</title>
<style type="text/css">
.item {
margin: 20px;
340px;
height: 340px;
background-color: #67B168;
float: left;
border-radius: 50%;
}
.item:hover {
background-color: white;
}
/* 角 start */
.coor {
160px;
height: 25px;
/* background-color: #67B168; */
margin: 30px 90px 0px 90px;
}
.coor_left {
7px;
height: 25px;
background-color: white;
float: left;
margin-left: 40px;
/* 旋转 */
transform: rotate(-35deg);
}
.coor_right {
7px;
height: 25px;
background-color: white;
float: right;
margin-right: 40px;
/* 旋转 */
transform: rotate(35deg);
}
/* 头 start */
.head {
height: 70px;
140px;
margin: -10px 100px 7px 100px;
background-color: white;
border-top-left-radius: 80px;
border-top-right-radius: 80px;
float: left;
}
.area {
15px;
height: 15px;
background-color: #67B168;
border-radius: 50%;
margin-top: 30px;
float: left;
}
.area_left {
margin-left: 40px;
margin-right: 15px;
}
.area_right {
margin-left: 15px;
margin-right: 40px;
}
/* 身体 start */
.body {
height: 130px;
220px;
/* background-color: #67B168; */
float: left;
margin: 0px 60px 0px 60px;
}
.body_left {
30px;
height: 100px;
background-color: white;
float: left;
border-radius: 15px;
}
.body_right {
30px;
height: 100px;
background-color: white;
float: right;
border-radius: 15px;
}
.body_center {
140px;
height: 130px;
background-color: white;
margin: 0 10px;
float: left;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
/* 腿 start */
.footer {
160px;
height: 50px;
/* background-color: #67B168; */
float: left;
margin: 0px 90px 0px 90px;
}
.footer_left {
30px;
height: 50px;
background-color: white;
margin-left: 37px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
float: left;
}
.footer_right {
30px;
height: 50px;
background-color: white;
margin-right: 37px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
float: right;
}
</style>
</head>
<body>
<div class="item">
<!-- 角 -->
<div class="coor">
<div class="coor_left"></div>
<div class="coor_right"></div>
</div>
<!-- 头 -->
<div class="head">
<div class="area area_left"></div>
<div class="area area_right"></div>
</div>
<!-- 主体 -->
<div class="body">
<div class="body_left"></div>
<div class="body_center"></div>
<div class="body_right"></div>
</div>
<!-- 腿 -->
<div class="footer">
<div class="footer_left"></div>
<div class="footer_right"></div>
</div>
</div>
</body>
</html>