CodePen

HTML

            
              <div class="wizardbar">
  <a class="wizardbar-item" href="one">
    One
  </a>
  <a class="wizardbar-item current" href="two">
    Two
  </a>
  <a class="wizardbar-item" href="three">
    Three
  </a>
  <a class="wizardbar-item" href="four">
    Four
  </a>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /*Theming options - change and everything updates*/
@wizardSize: 14px;

@wizardColor: #a00;
@bodyColor: black;
@hoverColor: lighten(@wizardColor, 20%);
@lightColor: lighten(@wizardColor, 35%);

@paddingVert: .5em; /*don't use more decimals, as it makes browser round errors more likely, make heights unmatching
-also watch using decimals at all at low wizardSize font sizes!*/
@paddingSide: .8em;
@arrowLength: 1em;
@itemMargin: 2px;

@borderRadiusVal: .25em;

.wizardbar {
  font-size: @wizardSize;
  line-height: 1;
  display: inline-block;
  margin: 50px 0;
}
  /*base item styles*/
  .wizardbar-item {
    display: inline-block;
    padding: @paddingVert @paddingSide;
    padding-left: @paddingSide + @arrowLength;
    text-decoration: none;
    transition: all .15s;
  
    /*default styles*/
    background-color: @lightColor;
    color: rgba(255,255,255, .8);
    text-align: center;
    text-shadow: 1px 1px rgba(0,0,0,.2);
    position: relative;
    margin-right: @itemMargin;
  }    
    /*arrow styles*/
    .wizardbar-item:before,
    .wizardbar-item:after {
      content: "";
      height: 0;
      width: 0;
      border-width: (.5+@paddingVert) 0 (.5+@paddingVert) @arrowLength;
      border-style: solid;
      transition: all .15s;
      
      position: absolute;
      left: 100%;
      top: 0;
    }
      /*arrow overlapping left side of item*/
      .wizardbar-item:before {
          border-color: transparent transparent transparent @bodyColor;
        left: 0;  
      }
      /*arrow pointing out from right side of items*/
      .wizardbar-item:after {
        border-color: transparent transparent transparent @lightColor;  
        z-index: 1;
      }
    /*current item styles*/
    .current.wizardbar-item {
      background-color: @wizardColor;
      color: white;
      cursor: default;
    }
        .current.wizardbar-item:after {
          border-color: transparent transparent transparent @wizardColor;  
        }
    /*hover styles*/
    .wizardbar-item:not(.current):hover {
      background-color: @hoverColor;
    }
      .wizardbar-item:not(.current):hover:after{
          border-color: transparent transparent transparent @hoverColor;
      }
      /*remove arrows from beginning and end*/
      .wizardbar-item:first-of-type:before,
     .wizardbar-item:last-of-type:after
      {
        border-color: transparent!important;
      }
       /*no inset arrow for first item*/
      .wizardbar-item:first-of-type {
        border-radius: @borderRadiusVal 0 0 @borderRadiusVal;
        
        padding-left: @paddingSide + (@arrowLength/2)
      }
      /*no protruding arrow for last item*/
      .wizardbar-item:last-of-type {
        border-radius: 0 @borderRadiusVal @borderRadiusVal 0;
        padding-right: @paddingSide + (@arrowLength/2);
      }
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: @bodyColor;
  line-height: 1.5;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*demo JS to switch active item on click.*/

$(".wizardbar-item").on("click",function(e){
  e.preventDefault();
 $(this).siblings(".current").removeClass("current");
  $(this).addClass("current");
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................