SOURCE

<div id="Minions">
  <div class="head">
    
    <div class="eye">
      <div class="left glasses">
        <div class="boll">
        	<div class="hole"></div>
        </div>
      </div>
      <div class="right glasses">
        <div class="boll">
        	<div class="hole"></div>
        </div>
      </div>
    </div>
    
    <div class="mouth"></div>
    <div class="cloth"></div>
  </div>
</div>

$skin-color: rgb(255, 219, 71);
$head-size: 200px;
$eye-hole-color: rgb(167, 94, 32);
$cloth-color: rgb(68, 106, 150);
#Minions {
  position: relative;
  font-size:0;
}

.head {
  position: relative;
  width: $head-size;
  height: 250px;
  background-color: $skin-color;
  border-bottom: 50px solid $cloth-color;
  border-radius: 45% 45% 25% 25%;
}

.eye {
  position: relative;
  display: inline-block;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
}
.eye::before, .eye::after{
  content:'';
  position:absolute;
  top:30%;
  width:0;
  height: $head-size/20;
  border-top:$head-size/20 solid transparent;
  border-bottom:$head-size/20 solid transparent;
}
.eye::before {
	border-right:$head-size/10 solid #000;  
  left: -10%;
}
.eye::after {
  right: -10%;
  border-left:$head-size/10 solid #000;
}
.eye > .left, .eye > .right {
  display:inline-block;
  width: $head-size*0.4;
  height: $head-size*0.4;
}
.glasses {
  border-radius: 50%;
  background-color:#aaa;
}
.eye .boll {
  position: relative;
  background-color: #eee;
  width: 80%;
  height: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: inset 0 0 15px;
}



.eye .hole {
  width: 50%;
  height: 50%;
  background-color: $eye-hole-color;
  position: relative;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid #555;
  box-shadow: inset 0 0 3px;
  transform: translate(-50%, -50%);
}

.hole::before {
  content: '';
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #333;
}
.mouth {
  position:absolute;
  width: 80px;
  height:30px;
  top:55%;
  left: 50%;
  transform:translateX(-50%);
  border-top: 20px solid rgba(103, 5, 5, 0.75);
  border-radius:40%;
  //transform:rotate(-20deg);
}
.mouth::after {
  content:'';
  position:absolute;
  width:15px;
  height:15px;
  background-color:#fff;
  //border:1px solid #000;
  border-top: 0;
  top: -66%;
  left: 50%;
  box-shadow: inset 0 0 2px;
}
.mouth::before {
  content:'';
  position:absolute;
  width:15px;
  height:15px;
  background-color:#fff;
  //border:1px solid #000;
  border-top: 0;
  top: -66%;
  left: 30%;
  box-shadow: inset 0 0 2px;
}
.cloth {
  position:absolute;
  width: 70%;
  height: 35%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius:10% 10% 0 0;
  background-color: $cloth-color;
}
.cloth::before, .cloth::after {
  content:'';
  position:absolute;
  top:0%;
  width:0;
  height: $head-size/20;
  border-top:$head-size/20 solid transparent;
  border-bottom:$head-size/20 solid transparent;
}

.cloth::before {
  border-right:$head-size/5 solid $cloth-color;  
  left: -21%;
}
.cloth::after {
  border-left:$head-size/5 solid $cloth-color;  
  right: -21%;
}