HTML5 CSS3 Animal Face | HTML 5 & CSS 3 - Single Element Graphics - Animal Face

Animal Face created by pure CSS3 plus only one single HTML element.

Demo

Explanation

In this demo, all shapes are created by the box-shadow property.

HTML & CSS

<style>
.box {
 display: block;
 position: absolute;
 /*overflow: hidden; */
 height: 80px;
 width: 80px;
 margin: 80px 80px; 
 /* eye1, eye2, nose_a, nose_b, nose_c, mouth_a, mouth_b, ear1, ear2, face, cheek1, cheek2  */
 box-shadow: 
  135px 10px 0 -30px white, 135px -15px 0 -30px white,
  160px 3px 0 -35px white,  160px 0px 0 -35px white, 160px -3px 0 -35px white, 
  150px 0px 0 -10px red, 160px 0px 0 -15px white, 
  100px -50px 0 -10px red, 100px 50px 0 -10px red, 
  150px 0px 0 10px red, 
  160px 15px 0 -5px red, 160px -15px 0 -5px red;
 border-radius: 40px;
 background: transparent;
 transform: rotate(90deg);
}
</style>
<div class="box"></div>