CSS で Chrome の恐竜を描く

DEMO

See the Pen Chrome's Error by kimmy (@kimmy) on CodePen.

HTML

<div class="dinosaur position size">
  <header class="head">
    <div class="face">
      <div class="eye"></div>   
    </div>
    <div class="chin"><div>
  </header>
  <div class="body">
    <div class="neck"></div>
    <div class="breast"></div>
    <div class="belly"></div>
  </div>
  <div class="hand"></div>
  <div class="tail">
    <div class="inner"></div>
  </div>
  <ul class="foot">
    <li class="left">
      <div class="leg"></div>
    </li>
    <li class="right">
      <div class="leg"></div>
    </li>
  </ul>
</div>

SCSS

$bg: #535353;

.position {
  top: 50%; left: 50%;
  margin: -43px -40px;
}

.size {
  transform: scale(2, 2);
}

.dinosaur {
  position: absolute;
  width: 80px; height: 86px;
  
  %before {
    display: block;
    position: relative;
    background: $bg;
    content: "";
  }
  
  .head {
    position: absolute;
    width: 40px; height: 30px;
    top: 0; right: 0;
    
    .face {
      position: relative;

      &:before {
        @extend %before;
        left: 4px;
        width: 32px; height: 4px;
      }

      &:after {
        @extend %before;
        left: 0;
        width: 40px; height: 18px;
      }
    }
    
    .eye {
      position: absolute;
      top: 6px; left: 8px;
      width: 4px; height: 4px;
      background: #fff;
      z-index: 1;
    }
    
    .chin {
      &:before {
        @extend %before;
        left: 0;
        width: 20px; height: 4px;
      }

      &:after {
        @extend %before;
        left: 0;
        width: 32px; height: 4px;
      }
    }
  }
  
  .body {
    position: absolute;
    top: 30px; left: 20px;
    width: 36px; height: 40px;
    
    .neck {
      &:before {
        @extend %before;
        left: 16px;
        width: 20px; height: 4px;
      }
      
      &:after {
        @extend %before;
        left: 10px;
        width: 26px; height: 4px;
      }
    }

    .breast {
      &:before {
        @extend %before;
        left: 4px;
        width: 32px; height: 4px;
      }
      
      &:after {
        @extend %before;
        left: 0;
        width: 36px; height: 14px;
      }
    }
    
    .belly {
      &:before {
        @extend %before;
        left: 0;
        width: 32px; height: 6px;
      }
      
      &:after {
        @extend %before;
        left: 0;
        width: 28px; height: 4px;
      }
    }
    
    &:after {
      @extend %before;
      left: 0;
      width: 24px; height: 4px;
    }
  }
  
  .hand {
    position: absolute;
    top: 38px; right: 16px;
    width: 8px; height: 8px;
    
    &:before {
      @extend %before;
      left: 0;
      width: 8px; height: 4px;
    }

    &:after {
      @extend %before;
      left: 4px;
      width: 4px; height: 4px;
    }
  }
  
  .tail {
    position: absolute;
    bottom: 16px; right: 60px;
    width: 20px; height: 40px;
    
    &:before {
      @extend %before;
      float: left;
      width: 4px; height: 24px;
    }
    
    .inner {
      float: left;
      position: relative;
      top: 12px;
      margin: 0 4px;
      width: 4px; height: 20px;
      background: $bg;

      &:before {
        position: absolute;
        top: -4px; left: -4px;
        width: 4px; height: 20px;
        content: "";
        background: $bg;
      }
      
      &:after {
        position: absolute;
        top: 4px; right: -4px;
        width: 4px; height: 20px;
        content: "";
        background: $bg;
      }
    }
    
    &:after {
      @extend %before;
      float: left;
      top: 16px;
      width: 4px; height: 24px;
    }
  }
  
  .foot {
    position: absolute;
    width: 28px; height: 16px;
    bottom: 0; left: 20px;
    
    .left {
      position: absolute;
      left: 16px;
      width: 12px; height: 16px;

      &:before {
        @extend %before;
        left: 0;
        width: 8px; height: 4px;
      }

      .leg {
        &:before {
          @extend %before;
          left: 4px;
          width: 4px; height: 4px;
        }

        &:after {
          @extend %before;
          left: 4px;
          width: 4px; height: 4px;
        }
      }
      
      &:after {
        @extend %before;
        left: 4px;
        width: 8px; height: 4px;
      }
    }
    
    .right {
      position: absolute;
      left: 0;
      width: 12px; height: 16px;
 
      &:before {
        @extend %before;
        left: 0;
        width: 12px; height: 4px;
      }
      
      .leg {
        &:before {
          @extend %before;
          left: 0;
          width: 8px; height: 4px;
        }

        &:after {
          @extend %before;
          left: 0;
          width: 4px; height: 4px;
        }
      }
      
      &:after {
        @extend %before;
        left: 0;
        width: 8px; height: 4px;
      }
    }
  }
}