Cacher is the code snippet organizer for pro developers

.setl_wizard_header{
  background:#f2f2f2
}

ul.setl_wizard_status{
  list-style:none;
  margin:0;
  padding:0;
  text-align:left
}

ul.setl_wizard_status li{
  background-color:#e1e1e1;
  color:#333;
  display:inline-block;
  margin:0;
  /*font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;*/
  font-size:14px;
  line-height:30px;
  padding:0 25px 0 40px;
  position:relative
}

ul.setl_wizard_status li:first-child{
  padding-left:25px;
  -webkit-border-top-left-radius:3px;
  border-top-left-radius:3px;
  -webkit-border-bottom-left-radius:3px;
  border-bottom-left-radius:3px
}

ul.setl_wizard_status li:last-child{
  -webkit-border-top-right-radius:3px;
  border-top-right-radius:3px;
  -webkit-border-bottom-right-radius:3px;
  border-bottom-right-radius:3px
}

ul.setl_wizard_status li:after,
ul.setl_wizard_status li:before {
  background-color:#F2F2F2;
  content:"";
  display:block;
  position:absolute
}

ul.setl_wizard_status li:after{
  -webkit-border-radius:3px;
  border-radius:3px;
  border-right:3px solid white;
  border-top:3px solid white;
  height:21px;
  right:-15px;
  top:3px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  width:21px;
  z-index:5
}

ul.setl_wizard_status li:before{
  height:30px;
  right:3px;
  width:20px;
  z-index:6
}

ul.setl_wizard_status li:last-child:after,
ul.setl_wizard_status li:last-child:before{
  background: #e1e1e1;
}

ul.setl_wizard_status li.setl_current{
  background-color:#1D77B3;
  color:white
}

ul.setl_wizard_status li.setl_current:after,
ul.setl_wizard_status li.setl_current:before{
  background-color:#1D77B3
}

ul.setl_wizard_status li.setl_completed{
  background-color:#ADC5E9;
  color:#f2f2f2
}

ul.setl_wizard_status li.setl_completed:after,
ul.setl_wizard_status li.setl_completed:before{
  background-color:#ADC5E9
}

<div class="setl_wizard">
  <div class="setl_wizard_header">
  <ul class="setl_wizard_status">
  <li class="setl_completed">1st Step: Hello</li>
  <li class="setl_current">2nd Step: Bla</li>
  <li>3rd Step: Finish</li>
</ul>
</div>
  <div class="setl_wizard_body">
    
  </div>
  <div class="setl_wizard_footer">
    
  </div>
</div>