RwrjXKL

index.html

<div class=tab-container>
  <ul class="tabs" >
    <li>
      <a href=# >Tab 1</a> 
    </li>
    <li class=active > 
      <a href=# >Tab 2</a> 
    </li>
    <li> 
      <a href=# >Tab 3</a> 
    </li>
    <li>
      <a href=# >Tab 4</a>
    </li>
    <li>
      <a href=# >Tab 5</a>
    </li>
    <li>
      <a href=# >Tab 6</a>
    </li>
    <li>
      <a href=# >Tab 7</a>
    </li>
    <li>
      <a href=# >Tab 8</a>
    </li>
  </ul>
</div>

rwrjxkl.markdown

RwrjXKL

A Pen by Ryan Holmes on CodePen.

License.

style.css

body{
  background : #efefef;
  font : .8em sans-serif;
  margin: 0;
}

.tab-container{
  background : #000;
  margin: 0;
  padding: 0;
  max-height: 35px;
}

ul.tabs{
  display: flex;
  margin: 0;
  line-height : 35px;
  max-height: 35px;
  overflow: hidden;
  padding-right: 20px;
}

ul.tabs > li {
  display: inline-block;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 0;
  position : relative;  
  max-width : 200px;
  margin-left: -1px;
  margin-top: 5px;
}

ul.tabs > li:hover {
  /*
    z-index ensures that it hides the borders that are overlapping from neighboring tabs
  */
  z-index: 3;
   animation: hover 5000ms linear;
  animation-fill-mode: forwards;  
}

ul.tabs > li:hover > a {
  border-color: transparent;  
}

ul.tabs > li.active{
  /*
    z-index ensures that the active tab is always in front of the hover effects
  */
  z-index: 5;
  background: #efefef;
  color: #000 !important;  
}


@keyframes hover {
 0% { 
   background-color: transparent;
 }
 100% {
   background-color: #111111
 }
}

@keyframes hover-left {
 0% { 
   border-color : transparent transparent transparent transparent;
 }
 100% {
   border-color :transparent  #111111 transparent transparent
 }
}

@keyframes hover-right {
 0% { 
   border-color : transparent transparent transparent transparent;
 }
 100% {
   /*green blue red yellow*/
   border-color :green blue red yellow;
   border-color :transparent transparent #111111 transparent
 }
}

/*
  Creates the inverse border template
  Color and position is determined in other rules
*/
ul.tabs > li:hover:before,
ul.tabs > li:hover:after,
ul.tabs > li.active:before,
ul.tabs > li.active:after {  
  content : '';
  background : transparent;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border-width: 10px;
  top: 0px;
  border-style : solid;
  position : absolute;
  -webkit-transform : rotate(45deg);
  border-color : transparent transparent transparent transparent;
}

ul.tabs > li:hover:before {
  left: -30px;
  animation: hover-left 5000ms linear;
  animation-fill-mode: forwards;  
}

ul.tabs > li:hover:after{
  right: -30px;
  animation: hover-right 5000ms linear;
  animation-fill-mode: forwards;  
}

ul.tabs > li.active:before{
  border-color : transparent #efefef transparent transparent;
  left: -30px;
}

ul.tabs > li.active:after{
  border-color : transparent transparent #efefef transparent;
  right: -30px;  
}

/*
  The a tag creates the small dividers between non-active tabs
*/
ul.tabs > li > a {
  max-width: 100%;
  overflow: hidden;
  /* todo: figure out a fade out overflow? */
  text-overflow: ellipsis;
  text-decoration: none;
  color: #b4b4b4;
  padding : 0 30px;
  border-right: 1px solid #474747;
  border-left: 1px solid #474747;
}

ul.tabs > li.active > a {
  color: #222;
  border-color: transparent;
}