Interesting CSS shape navigation (chevrons)

Question

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:

The final nav will look like an extended version of this:

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:

    .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;
    }

    <div id="nav" class="navArrow" style="position: relative;">
        <div class="arrowEndOn" id="nav">&nbsp;</div>
        <div class="arrowBulkOn" id="nav">NAV</div>
        <div class="arrowStartOn" id="nav">&nbsp;</div>
    </div>

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.

I'm handling the rollovers and on states with Javascript.

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.

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.

I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/

The red border has overflow: hidden; and the blue doesn't.]

My question is: 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.

Thanks

Answer 1

Add a negative margin to each arrow:

.navArrow {
  float: left;
  margin-left: -8px;
}

Demo: http://jsfiddle.net/S7hzu/2/

Answer 2

Flexbox

You can use this example

https://codepen.io/WBear/pen/pPYrwo

it works on new browsers, to support old ones some changes needed.

HTML:

<div class="content">
<div class="as1">
  <a href="#">NAV</a>
  </div>
 <div class="as2">
   <a href="#">NAV</a>
   </div>
  <div class="as3">
   <a href="#">NAV</a>
   </div>
  </div>

CSS:

 .content {
  margin-top: 10px;
  width: 100%;
  display: inline-flex;

}

.as1, .as2, .as3 {
  height: 70px;
  min-width: 8%;
  max-width: 100%;
  background-color: black;
  position: relative;
  display: inline-flex;
  text-align: center;
  flex-wrap: wrap;
  flex-grow: 1;

}

.as1 a, .as2 a, .as3 a {
  text-decoration: none;
  display: inline-flex;
  color: white;
  margin: auto;
  font-size: 14pt;

}

.as1:after {
  content: "";
  position: absolute;
  right: 4px;
  border-top: 35px solid transparent;
  border-left: 25px solid black;
  border-bottom: 35px solid transparent;
  z-index: 2;

}

.as2 {
  background-color: grey;
  margin-left: -29px;


}
.as2:after {
  content: "";
  position: absolute;
  right: 4px;
  border-top: 35px solid transparent;
  border-left: 25px solid grey;
  border-bottom: 35px solid transparent;
  z-index: 3;

}

.as3 {
  background-color: #A9A9A9;
  margin-left: -29px;
}