ZGKRJZ

index.html

<ul>
  <li><a href="">search</a></li>
  <li><a href="">images</a></li>
  <li><a href="">maps</a></li>
  <li><a href="">play</a></li>
  <li><a href="">youtube</a></li>
  <li><a href="">news</a></li>
  <li><a href="">mail</a></li>
  <li><a href="">a really long one to end with</a></li>
</ul>

style.css

/* Initial reference:  http://jsfiddle.net/sturobson/Xxxvd/ */

* {
  box-sizing: border-box;
}

body {
  font-size: 15px;
  font-weight: bold;
}

ul {
  background: #336fa4;
  display: block;
  height: 51px;
  list-style: none;
  padding: 0;
}

li {
  position: relative;
  float: left;
  background: #004b8d;
  line-height: 23px;
  padding: 14px 3px;
  margin-right: 21px;
}

a {
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

a:before {
  color: #fff;
  content: "+";
  font-weight: 900;
  margin-right: 6px;
}

li:before {
  content: "";
  position: absolute;
  background: none;
  border-left: 20px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 51px solid #004b8d;
  left: -20px;
  top: 0;
}

li:after {
  content: "";
  position: absolute;
  border-left: 0px solid transparent;
  border-right: 20px solid transparent;
  border-top: 51px solid #004b8d;
  right: -20px;
  top: 0;
}

li:hover {
  background: #336fa4;
}

li:hover:before {
  border-bottom-color: #336fa4;
}

li:hover:after {
  border-top-color: #336fa4;
}

li:first-of-type {
  padding-left: 20px;
}
li:last-of-type {
  padding-right: 20px;
}

li:first-of-type:before,
li:last-of-type:after {
  content: none;
}

ZGKRJZ.markdown

ZGKRJZ

A Pen by Eric Shields on CodePen.

License.