title: Top border is not working with cutting edges
body: <p>i was trying to make menu buttons with cutting edges, i want to give it a top border but it is not working at all, when i give it a border it come out a little to the left side.. please help
  each menu button have different color, i want to make it top boder RED but it is not working <a href="http://jsfiddle.net/j9AsL/" rel="nofollow">DEMO</a>
  html</p>
  
  <p>CSS</p>
  
  <pre><code>.btncol1 {
      background-color: #8cc63e;
  }
  .btncol2 {
      background-color: #aadcf3;
  }
  .btncol3 {
      background-color: #87868e;
  }
  .btncol4 {
      background-color: #c47269;
  }
  .btncol5 {
      background-color: #8cc63e;
  }
  .button:not(:last-child) {
      margin-left: 3px;
  }
  .button:before {
      content:'';
      width: 0px;
      height: 0px;
      display: block;
      border-bottom: 14px solid transparent;
      border-left: 14px solid White;
      position: relative;
      margin-left: -14px;
      margin-top: -14px;
      top: 4px;
      left: 4px;
  }
  .button {
      height: 55px;
      padding: 10px;
      width: 100px;
      display: inline-block;
      text-decoration: none;
      color: white;
      margin: 0;
      float: right;
      transition: all 300ms ease;
      font-size: 14px;
      font-weight: 400;
      font-family:'Open Sans', sans-serif;
      text-align: left;
  }
  </code></pre>