CodePen

HTML

            
              <nav>
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#" class="active">Contact Us</a></li>
  </ul>
</nav>  
            
          
!

CSS

            
              ul {
  width: 600px;
  height: 100px;
  margin: 20px auto;
  background: #212121;
  overflow: hidden;
  list-style: none;
}

li {
  float: left;
  margin: 0 10px;
}

a {
  display: block;
  color: #fff;
  padding: 20px 20px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

a.active {
  background: #a70011;
  background: linear-gradient(#6a0609, #a70011);
  position: relative;
}

a.active:before, a.active:after {
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  left: 0;
  right: 50%;
  bottom: -10px;
  background: #a70011;
}

a.active:before {
  background: linear-gradient(to right bottom, #a70011 50%, #212121 55%);
}

a.active:after {
  left: 50%;
  right: 0;
  background: linear-gradient(to left bottom, #a70011 50%, #212121 55%);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................