css

body {
  background:#f2f2f2;
}
ul {
  position:relative;
  @include transform(rotate(-30deg) skew(20deg,5deg));
}
.list-item {
  background:#000000;
  color:#575757;
  text-align:center;
  height:2.5em;
  width:4em;
  vertical-align:middle;
  line-height:2.5em;
  border-bottom:1px solid #060606;
  position:relative;
  display:block;
  text-decoration:none;
  @include box-shadow(-2em 1.5em 0 #e1e1e1);
  @include transition(all .25s linear);
  &:hover {
    background:#ff6e42;
    color:#fffcfb;
    @include transform(translate(0.9em,-0.9em));
    @include transition(all .25s linear);
    @include box-shadow(-2em 2em 0 #e1e1e1);
    &:before, &:after { @include transition(all .25s linear); }
    &:before {
      background:#b65234;
      width:1em;
      top:0.5em;
      left:-1em;
    }
    &:after {

      background:#b65234;
      width:1em;
      bottom:-2.5em;
      left:1em;
      height:4em;
    }
  }
  &:before, &:after {@include transition(all .25s linear);}
  &:after {
    content:"";
    position:absolute;
    height:4em;
    background:#181818;
    width:0.5em;
    bottom:-2.25em;
    left:1.5em;
    @include transform(rotate(90deg) skew(0deg,45deg));
  }
  &:before {
    content:"";
    position:absolute;
    height:2.5em;
    background:#121212;
    width:0.5em;
    top:0.25em;
    left:-0.5em;
    @include transform(skewY(-45deg));
  }
}

navbar

<ul>
  <li>
    <a class='list-item' href=''>
      <i class='icon-reorder'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-th-large'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-bar-chart'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-tasks'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-bell'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-archive'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-comment'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-sitemap'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-thumbs-up'></i>
    </a>
  </li>
  <li>
    <a class='list-item' href=''>
      <i class='icon-tumblr'></i>
    </a>
  </li>
</ul>