<div class="wizardbar">
  <a class="wizardbar-item" href="one">
  <a class="wizardbar-item current" href="two">
  <a class="wizardbar-item" href="three">
  <a class="wizardbar-item" href="four">

↑ Insert the most common viewport meta tag


              /*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: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;
          border-color: transparent transparent transparent @hoverColor;
      /*remove arrows from beginning and end*/
        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


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

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