Cute CSS Ninjas - Liveweave

<!DOCTYPE html>
<html>
<head>
<title>Cute CSS Ninjas</title>
</head>
<body>

<div id="ichizoku">
  <div class="ninja red">
    <div class="n--head">
      <div class="n--ribbon"></div>
      <div class="n--eyes"></div>
    </div>
    <div class="n--body">
      <div class="n--weapon"></div>
      <div class="n--arm"></div>
      <div class="n--arm"></div>
  
      <div class="n--leg"></div>
      <div class="n--leg"></div>
    </div> 
  </div>
  <div class="ninja blue">
    <div class="n--head">
      <div class="n--ribbon"></div>
      <div class="n--eyes"></div>
    </div>
    <div class="n--body">
      <div class="n--weapon"></div>
      <div class="n--arm"></div>
      <div class="n--arm"></div>
      <div class="n--leg"></div>
      <div class="n--leg"></div>
    </div> 
  </div>
  <div class="ninja green">
    <div class="n--head">
      <div class="n--ribbon"></div>
      <div class="n--eyes"></div>
    </div>
    <div class="n--body">
      <div class="n--weapon"></div>
      <div class="n--arm"></div>
      <div class="n--arm"></div>
      
      <div class="n--leg"></div>
      <div class="n--leg"></div>
    </div>  
  </div>
  
  <div class="ninja yellow">
    <div class="n--head">
      <div class="n--ribbon"></div>
      <div class="n--eyes"></div>
    </div>
    <div class="n--body">
      <div class="n--weapon"></div>
      <div class="n--arm"></div>
      <div class="n--arm"></div>
  
      <div class="n--leg"></div>
      <div class="n--leg"></div>
    </div>  
  </div>
</div>

</body>
</html>

body {
    background-color: #999;
}

#ichizoku{width:99%;margin:auto;}
.ninja {
    width: 180px;
    height: 200px;
    position: relative;
    margin: 100px 10px;
    float: left;
}
.ninja .n--head {
    width: 140px;
    height: 140px;
    background: #000;
    /*border-radius*/
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin: -70px auto;
    overflow: hidden;
}
/* Eyes */
.ninja .n--head .n--eyes {
    display: block;
    width: 300px;
    height: 300px;
    background: #000;
    border: 40px solid #f0d4a6;
    /*border-radius*/
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin: 35% -85%;
}
.ninja .n--head .n--eyes:before {
    content: '';
    display: block;
    width: 120px;
    height: 120px;
    background: transparent;
    border: 10px solid #000;
    position: absolute;
    margin: -49% 44%;
    /*border-radius*/
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
.ninja .n--head .n--eyes:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: #000;
    position: absolute;
    margin: -14% 60%;
    /*border-radius*/
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    /*box-shadow*/
    -webkit-box-shadow: 62px 0px 0;
    -moz-box-shadow: 62px 0px 0;
    box-shadow: 62px 0px 0;
}
.ninja .n--head .n--ribbon {
    position: absolute;
    width: 10px;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 40px solid #000;
    margin: -10px 105px;
    /*transform*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ninja .n--head .n--ribbon:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: #fff;
    /*border-radius*/
    -webkit-border-radius: 20000000%;
    -moz-border-radius: 20000000%;
    border-radius: 20000000%;
    margin: -60px -10px;
}
.ninja .n--body {
    width: 64%;
    height: 50%;
    background: #000;
    margin: 60px auto;
}
.ninja .n--body:after {
    content: '';
    display: block;
    background: #333;
    width: 100%;
    height: 10px;
    margin-top: 60%;
    z-index: 1;
    position: relative;
}
.ninja .n--body .n--weapon {
    width: 130px;
    height: 10px;
    /*border-radius*/
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    z-index: -1;
    /*transform*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    border: 1px solid #ccc;
    margin: auto -32%;
}
.ninja .n--arm {
    width: 50%;
    height: 55%;
    background: #000;
    /*border-radius*/
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.ninja .n--arm:nth-child(2) { margin: 0 -25% }
.ninja .n--arm:nth-child(3) { margin: -48% 75% }
.ninja .n--leg {
    width: 45%;
    height: 75%;
    float: left;
    background: #000;
    /*border-radius*/
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    margin-top: 60px;
}
.ninja .n--body .n--leg:nth-child(4) { margin-left: 0px }
.ninja .n--body .n--leg:nth-child(5) { margin-left: 10% }
/* Color the ninja */
.ninja.red .n--weapon {
    background: #e74c3c;
    border-color: #c0392b;
}
.ninja.red .n--body:after { background: #e74c3c }
.ninja.blue .n--weapon {
    background: #3498db;
    border-color: #2980b9;
}
.ninja.blue .n--body:after { background: #3498db }
.ninja.green .n--weapon {
    background: #2ecc71;
    border-color: #27ae60;
}
.ninja.green .n--body:after { background: #2ecc71 }
.ninja.yellow .n--weapon {
    background: #f1c40f;
    border-color: #f39c12;
}
.ninja.yellow .n--body:after { background: #f1c40f }