<div id="wrapper">
  <div class="eye left">
    <div class="ball"></div>
  </div>
  <div class="eye right">
    <div class="ball"></div>
  </div>
  <div class="mouth"></div>
</div>

css代码如下

* {
    margin:0;
    padding:0;
}
#wrapper {
    width:255px;
    height:255px;
    position:relative;
    margin:100px auto;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.eye {
    background:rgb(94,186,44);
    width:30px;
    height:30px;
    position:absolute;
    border:60px solid rgb(94,186,44);
    border-radius:160px;
}
.left {
    background: transparent;
    left: 0;
    top: 0;
}
.right {
    right: 0;
    top: 0;
}
.right .ball {
    width:30px;
    height:30px;
    background:transparent;
    border:20px solid #fff;
    position:absolute;
    top:-20px;
    left:-20px;
    border-radius:160px;
}
.mouth {
    width:135px;
    height:45px;
    border:60px solid rgb(94,186,44);
    position:absolute;
    bottom:0;
    z-index:-1;
    border-radius:160px;
}

预览效果：