CodePen

HTML

            
               <!-- TAB TEMPLATE -->
<svg style="position: absolute; margin-left: -200%; fill:transparent; stroke: none" >

  <polygon id="tab-shape-left" class="tab-shape tab-shape-left" points="900,30 0,30 10,0 900,0 " />
  <polygon id="tab-shape-right" class="tab-shape tab-shape-right" points="20,30 0,30 0,0 " />
</svg>

<div class="container">

   <nav role="navigation" class="main-navigation">
    <ul>
      <li class="tab-1 active" data-bg-color="hsl(190, 100%, 35%)">
      <a href="#home">
        <span>Home</span>
        <svg class="tab-left">
          <use xlink:href="#tab-shape-left"></use>
        </svg>
        <svg class="tab-right">
          <use xlink:href="#tab-shape-right"></use>
        </svg>
      </a>
      </li>
      <li class="tab-2" data-bg-color="hsl(205, 80%, 45%)">
      <a href="#about">
        <span>About</span>
        <svg class="tab-left">
          <use xlink:href="#tab-shape-left"></use>
        </svg>
        <svg class="tab-right">
          <use xlink:href="#tab-shape-right"></use>
        </svg>
      </a>
      </li>
      <li class="tab-3" data-bg-color="hsl(228,80%,60%)">
      <a href="#clients">
        <span>Tabwithmanyletters</span>
        <svg class="tab-left">
          <use xlink:href="#tab-shape-left"></use>
        </svg>
        <svg class="tab-right">
          <use xlink:href="#tab-shape-right"></use>
        </svg>
      </a>
      </li>
      <li class="tab-4" data-bg-color="hsl(255,80%,65%)">
      <a href="#contact">
        <span>Contact</span>
        <svg class="tab-left">
          <use xlink:href="#tab-shape-left"></use>
        </svg>
        <svg class="tab-right">
          <use xlink:href="#tab-shape-right"></use>
        </svg>
      </a>
      </li>
    </ul>
  </nav> 

  <div class="main-content">
    <article class="article">
      <h2><a href="http://codepen.io/atelierbram/pen/JfKmH">Flexible tabsizes with SVG</a></h2>
      <p>These SVG navtabs combine the concept behind Douglas Bowman’s “Sliding doors”, and SVG template technique. It requires two SVG shapes: one very wide one for the left side, and one small just for the right corner.
      </p>  
      <footer>
        <h3>Resources</h3>
        <ul>
          <li><a href="http://codepen.io/chriscoyier/pen/LixbE">Original demo created by Chris Coyier</a></li>
          <li><a href="http://css-tricks.com/svg-tabs-using-svg-shape-template/">SVG Tabs (Using an SVG Shape as Template) - article on CSS-Tricks by Chris Coyier</a></li>
          <li><a href="http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/">SVG icons for the win - article on Codrops by Oleg Solomka</a></li>
          <li><a href="http://alistapart.com/article/slidingdoors">Sliding Doors of CSS - article on A List Apart by Douglas Bowman</a></li>
        </ul>
      </footer>
    </article>
  </div>
</div><!-- /.container -->  
            
          
!

CSS

            
              *,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  /* outline: 1px dotted salmon; */
  outline: 0;
}
html {
  font-size: 16px;
}
html,
body {
  min-height: 100%;
  background-color: #adf1ff;
}
body {
  font: 100%/1.375  AvenirNext-Regular, "Lucida Grande", Corbel, "Trebuchet Ms", sans-serif;
  color: #111;
}
.container {
  max-width: 40em;
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: #1942e6;
}
h2 a {
  color: #4768eb;
}
a,
a:focus {
  outline: 0;
}
.main-navigation {
  overflow: auto;
  position: relative;
  margin: 3em auto 0;
  ul {
    list-style: none;
    overflow: auto;
  }
  li {
    float: left;
    position: relative;
    &.active {
      z-index: 6;
    }
  }
  a {
    display: block;
    position: relative;
    height: 30px;
    color: rgba(0,0,0,.75);
    text-transform: uppercase;
    padding: 0 10px 0 20px;
    &:hover {
      color: rgba(255,255,255,.85);
    }
  }
  svg {
    height: 100%;
    position: absolute;
    top: 0;
    bottom:0;
    z-index: 1;
    pointer-events: none;
    /* transition: all .25s; */
  }
  .tab-left {
    width: 100%;
    left: 0;
  }
  .tab-right {
    width: 20px;
    /* weird gap in Firefox */
    /* right: -20px; */
    right: 0;
    transform: translateX(20px);
  }
  span {
    position: relative;
    font-size: .8125em;
    z-index: 2;
    display: inline-block;
    padding-top: 8px;
    /* background: rgba(0,0,0,.5); */
    overflow: hidden;
    vertical-align: top;
  }

  .active a {
    color: #fff;
  }

  .tab-1 {
    z-index: 4;
    svg {
      fill: hsla(190, 100%, 35%, 0.5);
    }
    a:hover svg {
      fill: hsla(190, 100%, 35%, 0.75);
    }
  }
  .tab-2 {
    z-index: 3;

    svg {
      fill: hsla(205, 80%, 45%, 0.5);
    }
    a:hover svg {
      fill: hsla(205, 80%, 45%, 0.75);
    }
  }
  .tab-3 {
    z-index: 2;
    svg {
      fill: hsla(228, 80%, 60%, 0.5);
    }
    a:hover svg {
      fill: hsla(228, 80%, 60%, 0.75);
    }
  }
  .tab-4 {
    z-index: 1;
    svg {
      fill: hsla(255, 80%, 65%, 0.5);
    }
    a:hover svg {
      fill: hsla(255, 80%, 65%, 0.75);
    }
  }
  .tab-1.active svg {
    fill: hsla(190, 100%, 35%, 1);
  }
  .tab-2.active svg {
    fill: hsla(205, 80%, 45%, 1);
  }
  .tab-3.active svg {
    fill: hsla(228, 80%, 60%, 1);
  }
  .tab-4.active svg {
    fill: hsla(255, 80%, 65%, 1);
  }
}

/* general styles */
.main-content {
  position: relative;
  z-index: 10;
  background-color: hsl(190, 100%, 35%);
  padding-top: .25em;
  margin-bottom: 3em;
}

.article {
  background: hsla(0,0%,100%,0.95);
  padding: 2em 3em;
  h2 {
    text-transform: uppercase;
    font-size: 2em;
    margin-bottom: 0.5em;
  }
  h3 {
    font-size: 1.5em;
    margin-top: 0.25em;
    margin-bottom: 0.125em;
    color: #01697e;
  }
}
h1, h2, h3, .main-navigation span {
  font-family: AvenirNextCondensed-DemiBold, "Lucida Grande", Corbel, "Trebuchet Ms", sans-serif;
}
p {
  padding: .5em 0;
}
footer ul {
  list-style: square;
  color: #97a9f3;
}
footer li {
  text-indent: -.125em;
  margin-left: .125em;
}
footer a {
  display: block;
  padding: .125em 0;
}

@media (max-width: 639px) {
  .article {
    padding-left: 2em;
    padding-right: 2em;
  }
}

@media (max-width: 440px) {
  .main-navigation svg {
    width: 0;
    height: 0;
    display: none;
  }
  .main-navigation li {
    width: 50%;
  }
  .main-navigation a {
    padding-left: 10px;
  }

  .tab-1 {
    a {
      background-color: hsla(190, 100%, 35%, 0.5);
    }
    a:hover {
      background-color: hsla(190, 100%, 35%, 0.75);
    }
  }
  .tab-2 {
    a {
      background-color: hsla(205, 80%, 45%, 0.5);
    }
    a:hover {
      background-color: hsla(205, 80%, 45%, 0.75);
    }
  }
  .tab-3 {
    a {
      background-color: hsla(228, 80%, 60%, 0.5);
    }
    a:hover {
      background-color: hsla(228, 80%, 60%, 0.75);
    }
  }
  .tab-4 {
    a {
      background-color: hsla(255, 80%, 65%, 0.5);
    }
    a:hover {
      background-color: hsla(255, 80%, 65%, 0.75);
    }
  }
  .tab-1.active a {
    background-color: hsla(190, 100%, 35%, 1);
  }
  .tab-2.active a {
    background-color: hsla(205, 80%, 45%, 1);
  }
  .tab-3.active a {
    background-color: hsla(228, 80%, 60%, 1);
  }
  .tab-4.active a {
    background-color: hsla(255, 80%, 65%, 1);
  }
  .article {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}
@media (max-width: 350px) {
  .main-navigation li {
    width: 100%;
  }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var menuItems = $('.main-navigation li');

menuItems.on("click", function(event) {
    
  menuItems.removeClass("active");
  
  $(this).addClass("active");
  
  $(".main-content").css({
    "background": $(this).data("bg-color")
  });
  
  event.preventDefault();
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................