gistfile1.html

<ul class="navigation">
    <li class="navigation__button-wrapper">
        <a href="#" class="navigation__button navigation__button_complete">Link</a>
    </li>
    <li class="navigation__button-wrapper">
        <a href="#" class="navigation__button navigation__button_complete">Link</a>
    </li>
    <li class="navigation__button-wrapper">
        <span class="navigation__button navigation__button_active">Link</span>
    </li>
    <li class="navigation__button-wrapper">
        <span class="navigation__button">Link</span>
    </li>
    <li class="navigation__button-wrapper">
        <span class="navigation__button">Link</span>
    </li>
</ul>

style.css

/*Полностью работать в IE8 не будет, так как он не поддерживает border-radius и :last-child.
Соответственно что бы работало в IE - надо уголки эмулировать картинками, а к последнему элементу добавлять отдельный класс.

И согласно стандарту http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes не должно быть никаких проблем, если мы опустим display:table-row;
*/

.navigation {
  list-style-type: none;
  height: 40px;
  width: 100%;
  display: table;
  margin: 0 auto;
  text-align: center;
  color: white;
  overflow: hidden;
  font: bold 0.9em 'Arial', 'serif';
  line-height: 20px;
  border-spacing: 22px 0;
  padding: 0;
}
a {
  color: #eee;
  text-decoration: none;  
}
.navigation__button-wrapper {
  display: table-cell;
  position: relative;
  width: auto; 
}
.navigation__button {
  padding: 10px 20px;
  height: 20px;
  display: block;
  position: relative;  
  background-color: #bbb;
}
.navigation__button:after, .navigation__button:before {
  content: "";
  display: table-cell;
  width: 0;
  height: 0;
  border-width: 40px 20px;
  border-style: solid;
  border-color: transparent transparent transparent #bbb;
  right: -40px;
  top: -20px;
  position: absolute;
}

.navigation__button:before {
  border-color: #bbb #bbb #bbb transparent;
  left: -20px;
}
.navigation__button-wrapper:first-child  .navigation__button:before{
  display: none;
  margin-right: 0;
    padding-right: 0;
}
.navigation__button-wrapper:last-child .navigation__button:after  {
  display: none;
  margin-right: 0;
    padding-right: 0;
}
.navigation__button-wrapper:last-child .navigation__button {
  border-radius: 0 5px 5px 0;
}
.navigation__button-wrapper:first-child  .navigation__button {
  border-radius: 5px 0 0 5px;
}

/* ACTIVE */
.navigation__button_active {
  background-color: #4396E2;
}
.navigation__button_active:after {
  border-color: transparent transparent transparent #4396E2;
}
.navigation__button_active:before {
  border-color: #4396E2 #4396E2 #4396E2 transparent;
}

/* COMPLETE */
.navigation__button_complete {
  background-color: #95CFF0;
  color: #4396E2;
}
.navigation__button_complete:after {
  border-color: transparent transparent transparent #95CFF0;
}
.navigation__button_complete:before {
  border-color: #95CFF0 #95CFF0 #95CFF0 transparent;
}