Slanted tab navigation http://sassmeister.com/gist/b0514a9225841bb08036

SassMeister-input-HTML.html

<ul class="tab">
  <li>
    <a href="#">Tab Item</a>
  </li>
  <li class="active">
    <a href="#">Tab Item</a>
  </li>
  <li>
    <a href="#">Tab Item</a>
  </li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$size-width-tab-angle: 15px;

a {
  text-decoration: none;
}

.tab {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: inline-block;
  }
  
  a {
    background: seagreen;
    color: #fff;
    display: block;
    height: 15px;
    padding: 15px 25px;
    position: relative;
    
    &:hover {
      background: darken(seagreen, 20%);
    }
  }
  
  a {
    margin-left: $size-width-tab-angle;
    margin-right: $size-width-tab-angle;
    
    &:after {
      width: 0;
      height: 0;
      border-top: 45px solid transparent;
      border-left: $size-width-tab-angle solid darken(seagreen, 20%);
      content: '';
      right: -$size-width-tab-angle;
      margin: 0;
      position: absolute;
      bottom: 0;
    }
    
    &:before {
      width: 0;
      height: 0;
      border-top: 45px solid transparent;
      border-right: $size-width-tab-angle solid darken(seagreen, 20%);
      content: '';
      left: -$size-width-tab-angle;
      margin: 0;
      position: absolute;
      bottom: 0;
    }
  }
  .active a {
    background: darken(seagreen, 20%);
  }
}

SassMeister-output.css

a {
  text-decoration: none;
}

.tab {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tab li {
  display: inline-block;
}
.tab a {
  background: seagreen;
  color: #fff;
  display: block;
  height: 15px;
  padding: 15px 25px;
  position: relative;
}
.tab a:hover {
  background: #153e27;
}
.tab a {
  margin-left: 15px;
  margin-right: 15px;
}
.tab a:after {
  width: 0;
  height: 0;
  border-top: 45px solid transparent;
  border-left: 15px solid #153e27;
  content: '';
  right: -15px;
  margin: 0;
  position: absolute;
  bottom: 0;
}
.tab a:before {
  width: 0;
  height: 0;
  border-top: 45px solid transparent;
  border-right: 15px solid #153e27;
  content: '';
  left: -15px;
  margin: 0;
  position: absolute;
  bottom: 0;
}
.tab .active a {
  background: #153e27;
}

SassMeister-rendered.html

<ul class="tab">
  <li>
    <a href="#">Tab Item</a>
  </li>
  <li class="active">
    <a href="#">Tab Item</a>
  </li>
  <li>
    <a href="#">Tab Item</a>
  </li>
</ul>