A Pen by Jesse Shawl.

CSS-only-Slanty-nav-tabs.markdown

CSS only Slanty nav tabs

A Pen by Jesse Shawl on CodePen.

License.

index.html

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

style.scss

@import "compass";
*{
  box-sizing:border-box;
}

nav {
  background: #005B63;
}
ul{
  margin:0;
  padding:0;
  list-style:none;
  &:after{
    content:' ';
    display:table;
    clear:both;
  }
}

li {
  display:block;
  float:left;
  width:25%;
  text-align:center;
  position:relative;
  
}

@for $i from 1 through 4{
    li:nth-child(#{$i}){
      background:lighten(#005B63, $i*3%);
      &:after{
        content:'';
        z-index:1;
        transition:border-width .2s ease;
        display:block;
        position:absolute;
        margin-left:-20px;
        left:100%;
        height:0;
        width:0;
        border-width:76px 0px 0 40px;
        border-color:lighten(#005B63, ($i+1)*3%) lighten(#005B63, $i*3%);
        border-style:solid;
        top:0;
      }
    }
  }

li:last-child{
  &:after{
    display:none;
  }
}

a{
  color:#fff;
  display:block;
  padding:1em 0;
  text-decoration:none;
  font-weight:bold;
  font-size:1.5em;
  
}