Pure CSS Pencil - Flat Style (SASS - Bourbon)

index.html

<div id="pencil">
  <div class="pencil__wrapper">
    <div class="rubber"></div>
    <div class="metal-holder"></div>
    <div class="body"></div>
    <div class="nib"></div>
  </div>
</div>

Pure-CSS-Pencil---Flat-Style-(SASS---Bourbon)-.markdown

Pure CSS Pencil - Flat Style (SASS - Bourbon)

So I was bored. And I thought I'd draw a pencil. In CSS. As you do. Using the awesome Bourbon SASS mixin library. And following in the flat icon style.

A Pen by Mukesh Kumar on CodePen.

License.

style.scss

@import "bourbon";
//colours 
$rubber: #EC87C0;
$metal: #ddd;
$pencil: yellow;
$nib: #FFCC99;
$lead: #333;

$pencil-height: 400;

body {
  background: #19B3FF;
}

.shadow {
  content: "";
  position: absolute;
}

.shadow--pos {
  width: 30px;
  left: 30px;
}

#pencil {}

.pencil__wrapper {
  position: relative;
  width: 60px;
  overflow: hidden;
  height: auto;
  margin: 0 auto;
}

.rubber {
  height: 40px;
  background-color: $rubber;
  @include border-top-radius(5px);
  
  &:before {
    @extend .shadow;
    @extend .shadow--pos;
    @include border-right-radius(5px);
    height: 40px;
    background-color: darken($rubber, 5%);
  }
}

.metal-holder {
  height: 30px;
  background: $metal;
  
  &:before {
    @extend .shadow;
    @extend .shadow--pos;
    height: 30px;
    background-color: darken($metal, 5%);
  }
}

.body {
  height: $pencil-height*1px;
  background: $pencil;
  
  &:before {
    @extend .shadow;
    @extend .shadow--pos;
    height: $pencil-height*1px;
    background-color: darken($pencil, 5%);
  }
}

.nib {
  border-top: 60px solid $nib;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

.nib:before {
  @extend .shadow;
  border-top: 60px solid darken($nib, 5%);
  border-right: 30px solid transparent;
  bottom: 0px;
}

.nib:after {
  @extend .shadow;
  border-top: 30px solid $lead;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  bottom: 0px;
  left: 15px;
 }