<div class="box">
  <div class="head">
    <div class="trunk"></div>
    <div class="eye">
      <div class="inner-eye"></div>
    </div>
    <div class="ear">
      <div class="inner-ear"></div>
    </div>
    <div class="mouth"></div>
  </div> <!-- End "head" -->
</div> <!-- End "box" -->
.box{
  position: relative;
  margin: auto;
  display: block;
  background: white;
/*   border: solid 4px green; */
  border-radius: 15px;
  width: 640px;
  height: 480px;
}
.head{
  position: absolute;
  top: 16.5%;
  left: 25%;
  width: 50%;
  height: 67%;
  background: #848484;
  border-radius: 50%;
}
.trunk{
  position: absolute;
  top: 70%;
  left: 5%;
  width: 20%;
  height: 100%;
  background: #848484;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
}
.eye{
  position: absolute;
  top: 22%;
  left: 10%;
  width: 25%;
  height: 25%;
  background: white;
  border-radius: 50%;
}
.inner-eye{
  position: absolute;
  top: 5%;
  left: 15%;
  width: 50%;
  height: 50%;
  background: black;
  border-radius: 50%;
}
.ear{
  position: absolute;
  top: 1%;
  right: -10%;
  width: 60%;
  height: 75%;
  background: #575757;
  border-radius: 50%;
  border-bottom-right-radius: 0%;
}
.inner-ear{
  position: relative;
  margin: auto;
  display: block;
  width: 90%;
  height: 90%;
  background: #474747;
  border-radius: 50%;
  border-bottom-right-radius: 0%;
}
.mouth{
  position: absolute;
  top: 85%;
  left: 25%;
  width: 10%;
  height: 100%;
  background: white;
  border-radius: 50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.