CodePen

HTML

            
              <nav role='navigation'>
  <ul>
    <li class="a"><a href="#">Home</a></li>
    <li class="b"><a href="#">About</a></li>
    <li class="c"><a href="#">Clients</a></li>
    <li class="d"><a href="#">Contact Us</a></li>
  </ul>
</nav>  
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              ul {
  float: left;
  width: 100%;  
}
li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  float: left;
  line-height: 50px;
  padding: 0 20px;
  position: relative;
  width: 20%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  &:before {
    bottom: 0;
    border-top-left-radius: 20px;
    content: '';
    height: 50px;
    position: absolute;
    right: -50px;
    z-index: 5050;
    width: 50px;    
  }
  &:after {
    background-color: green;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 18px;
    bottom: 0;
    content: '';
    height: 50px;
    position: absolute;
    right: -50px;
    z-index: 5050;
    width: 50px;
  }
}
a {
  color: white;
  display: block;
  font-weight: bold;
  position: relative;
  text-decoration: none;
  z-index: 5150;
  &:hover,
  &:focus {
    text-decoration: underline;  
  }
}
.a { 
  background-color: red; 
  &:before { 
    background-color: red; 
  } 
  &:after {
    background-color: orange; 
  }
}
.b { 
  background-color: orange;
  &:before { 
    background-color: orange; 
  } 
  &:after {
    background-color: blue; 
  }  
}
.c { 
  background-color: blue; 
  &:before { 
    background-color: blue; 
  } 
  &:after {
    background-color: purple; 
  }  
}
.d { 
  background-color: purple; 
  &:before { 
    background-color: purple; 
  } 
  &:after {
    background-color: white; 
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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