<div class="smiley smiley-1">
  <div class="eye eye-left"></div>
  <div class="eye eye-right"></div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>

<div class="smiley smiley-2">
  <div class="eye eye-left"></div>
  <div class="eye eye-right"></div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>

<div class="smiley smiley-3">
  <div class="eye eye-left"></div>
  <div class="eye eye-right"></div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>

<div class="smiley smiley-4">
  <div class="eye eye-left"></div>
  <div class="eye eye-right"></div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>
body {
  background-color: #eee;
}
.smiley {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border-radius: 50%;
  position: relative;
  float: left;
}
.smiley-2 {
  width: 150px;
  height: 150px;
}
.smiley-3 {
  width: 100px;
  height: 100px;
}
.smiley-4 {
  width: 50px;
  height: 50px;
}
.eye {
  position: absolute;
  background-color: #000;
  width: 15%;
  height: 15%;
  border-radius: 50%;
}
.eye-left {
  left: 25%;
  top:25%;
}
.eye-right{
  right: 25%;
  top:25%;
}
.mouth {
  position: absolute;
  bottom: 25%;
  left: 25%;
  background-color: #000;
  width: 50%;
  height: 15%;
  border-radius: 50%;
  overflow:hidden;
}
.tongue {
  background-color: #f00;
  width: 50%;
  height:60%;
  border-radius: 50%;
  position: absolute;
  bottom: -15%;
  left:25%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.