Menu Tab Design

by Muthuraman B

HTML

<div class="menuList">
  <ul>
    <li class="active"><a>Select Products</a></li>
    <li><a>Select Counterparties</a></li>
    <li class="active"><a>Assign Products</a></li>
    <li><a>Assign Counterparties</a></li>
    <li class="active"><a>Finish</a></li>
  </ul>
</div>

CSS

.menuList {
  width: 96%;
  height:50px;  
  margin: 15px auto;
}

.menuList > ul {
  list-style: none;
  margin:0;
  padding:0;
}
.menuList > ul > li {
  float:left;
  position: relative;
}

.menuList > ul > li:before {
  height: 35px;
  width: 35px;
  content: '';
  position: absolute;
  right: 10px;
  top: 6px;
  border: 3px solid #FFF;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.menuList > ul > li:last-child:before, .menuList > ul > li.active:last-child > a:before, .menuList > ul > li.active:first-child:before {
  border:none;
}
.menuList > ul > li > a {
  display:block;
  line-height:50px;
  background: #CCC;
  padding: 0 39px 0 15px;
}

.menuList > ul > li:last-child a {
  padding:0 25px 0 15px;
}

.menuList > ul > li.active > a {
  color:#FFF;
  background: #000;  
}
.menuList > ul > li.active > a:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-top: 25px solid #CCC;
  border-bottom: 25px solid #CCC;
}

.menuList > ul > li.active:before {
  content: '';
  position: absolute;
  top: 0;
  left: -30px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 30px solid #CCC;
  border-top: 25px solid #000;
  border-bottom: 25px solid #000;
  border-right: 0;
  background: #000;
  transform: rotate(0deg);
}