SVG Tabs

index.html

<!-- TAB TEMPLATE -->
<svg height="0" width="0" style="position: absolute; margin-left: -100%;">
  
  <defs>
    
    <filter id='shadow'>
      <feComponentTransfer in="SourceGraphic">
        <feFuncR type="discrete" tableValues="0"/>
        <feFuncG type="discrete" tableValues="0"/>
        <feFuncB type="discrete" tableValues="0"/>
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="1"/>
       <feComponentTransfer><feFuncA type="linear" slope="0.2"/></feComponentTransfer>
      <feOffset dx="5" dy="1" result="shadow"/>
      <feComposite in="SourceGraphic" />
    </filter>
        
    <linearGradient id="tab-1-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(136, 195, 229, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(118, 160, 192, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-2-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(149, 190, 233, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(112, 153, 213, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-3-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(61, 149, 218, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(43, 130, 197, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-4-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(72, 204, 243, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(71, 194, 243, 1.0);" />
    </linearGradient>
      
  </defs>
  
  <path id="tab-shape" class="tab-shape" d="M116.486,29.036c-23.582-8-14.821-29-42.018-29h-62.4C5.441,0.036,0,5.376,0,12.003v28.033h122v-11H116.486
			z">
  
</svg>

<nav role="navigation" class="main-navigation">
  <ul>
    <li class="tab-1 active" data-bg-color="rgba(118, 160, 192, 1.0)">
      <a href="#home">
        <span>Home</span>
        <svg viewBox="0 0 122 40">
           <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-2" data-bg-color="rgba(112, 153, 213, 1.0)">
      <a href="#about">
        <span>About</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-3" data-bg-color="rgba(43, 130, 197, 1.0)">
      <a href="#clients">
        <span>Clients</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-4" data-bg-color="rgba(71, 194, 243, 1.0)">
      <a href="#contact">
        <span>Contact</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
  </ul>
</nav>

<div class="main-content">
  <article class="article">
    <h2>An Article Right Here, Boss.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa totam cumque ad repellendus ab ea repellat aperiam accusantium labore officia est culpa fugiat eaque magnam a. Labore molestias ea at maiores inventore veritatis cupiditate cum doloribus quisquam eum et asperiores!</p>
  </article>
</div>

script.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();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Cabin);

* {
  box-sizing: border-box;
}
body {
  padding: 1rem 3rem;
  font-family: 'Cabin', sans-serif;
  line-height: 1.4;
  min-width: 925px;
}
a {
  text-decoration: none;
}

.main-navigation {
  overflow: hidden;
  position: relative;
  padding: 0 0 0 1rem;
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    float: left;
    width: 12rem;
    height: 5rem;
    margin: 0 0 0 -1rem;
    position: relative;
    &.active {
      z-index: 6; 
    }
  }
  a {
    position: relative;
    display: inline-block;
    color: white;
    width: 100%;
    height: 100%;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 1.4rem;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  }
  svg {
    width: 120%;
    height: 100%;
    // for tab shadows
    // also screws up Firefox
    // filter: url(#shadow);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }
  span {
    position: relative;
    padding: 1rem 0 0 3.3rem;
    z-index: 2;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .tab-1 {
    z-index: 4;
    svg {
      fill: url(#tab-1-bg); 
    }
  }
  .tab-2 {
    z-index: 3;
    svg {
      fill: url(#tab-2-bg); 
    }
  }
  .tab-3 {
    z-index: 2;
    svg {
      fill: url(#tab-3-bg);
    }
  }
  .tab-4 {
    z-index: 1;
    svg {
      fill: url(#tab-4-bg);
    }
  }
/*  &::after {
    content: "";
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 798px;
    height: 12px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    z-index: 5;
  }*/
}

.main-content {
  position: relative;
  z-index: 10;
  background: rgba(118, 160, 192, 1.0);
  margin: -1.6rem 0 0 0;
  padding: 3rem;
  border-radius: 15px;
  border-top-left-radius: 0;
}

.article {
  background: white;
  padding: 5rem;
  border-radius: 8px;
  h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 3rem;
    color: rgba(118, 160, 192, 1.0);
    margin: 0 0 0.5rem 0;
  }
}

svg-tabs.markdown

SVG Tabs

Got some ideas from http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/

A Pen by Chris Coyier on CodePen.

License.