title: Interesting CSS shape navigation (chevrons)
body: <p>I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:</p>
  
  <p><img src="https://i.stack.imgur.com/R4NfA.jpg" alt="enter image description here"></p>
  
  <p>The final nav will look like an extended version of this:</p>
  
  <p><img src="https://i.stack.imgur.com/aKXUl.jpg" alt="enter image description here"></p>
  
  <p>I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:</p>
  
  <pre><code>    .arrowEndOn {
          font-size: 10px; line-height: 0%; width: 0px;
          border-top: 11px solid #FFFFFF;
          border-bottom: 11px solid #FFFFFF;
          border-left: 5px solid transparent;
          border-right: 5px solid #FFFFFF;    
          float: left;
          cursor: pointer;
      }
  
      .arrowBulkOn {
          height: 20px;
          background: #FFFFFF;
          padding: 2px 5px 0px 0px;
          float: left;
          color: #000000;
          line-height: 14pt;
          cursor: pointer;
      }
  
      .arrowStartOn {
          font-size: 0px; line-height: 0%; width: 0px;
          border-top: 11px solid transparent;
          border-bottom: 11px solid transparent;
          border-left: 5px solid #FFFFFF;
          border-right: 0px solid transparent;        
          float: left;
          cursor: pointer;
      }
  
      &lt;div id="nav" class="navArrow" style="position: relative;"&gt;
          &lt;div class="arrowEndOn" id="nav"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="arrowBulkOn" id="nav"&gt;NAV&lt;/div&gt;
          &lt;div class="arrowStartOn" id="nav"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other. </p>
  
  <p>I'm handling the rollovers and on states with Javascript.</p>
  
  <p>My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.</p>
  
  <p>I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.</p>
  
  <p>I've set an example up here - <a href="http://jsfiddle.net/spacebeers/S7hzu/1/" rel="nofollow noreferrer">http://jsfiddle.net/spacebeers/S7hzu/1/</a></p>
  
  <p>The red border has <code>overflow: hidden;</code> and the blue doesn't.]</p>
  
  <p><strong>My question is:</strong> How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.</p>
  
  <p>Thanks</p>