title: Responsive slanted border
body: <p>I have created a slant style triangle using borders to use on navigation items, however the border that is used to define the length of the slant is fixed and it needs to adapt based on the content inside the list item. I also want to use the same css class for each list item.</p>
  
  <p>Is this the best solution for what I am trying to achieve or is there an alternative method that has the same result?</p>
  
  <p>I am open to JS solutions too.</p>
  
  <p>I have used the following CSS so far:</p>
  
  <pre><code>li {
      float: left;
      position: relative;
      height: 20px;
      background: #a1a8ad;
      padding: 5px 12px;
      margin-right: 10px;
      list-style: none;
  }
  
  li:before {
      content: "";
      position: absolute;
      top: -3px;
      width: 0;
      height: 1px;
      left: 0px;
      border-right: 63px solid #a1a8ad; /* razorblade color */
      border-top: 2px solid rgba(0, 0, 0, 0); /* transparent */
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xyum0c5z/7/" rel="nofollow">JSFiddle here</a></p>