Progress Bar http://codepen.io/dmurawsky/pen/oYJrvg?editors=1100

progress.html

<div class="se-progress">
  <div class="active">
    <span class="glyphicon glyphicon-map-marker"></span> 
    <span class="text">This is some text</span>
    <span class="arrow-bg"></span>
    <span class="arrow"></span>
  </div>
  <div class="active">
    <span class="glyphicon glyphicon-map-marker"></span>
    <span class="text">This is text</span>
    <span class="arrow-bg"></span>
    <span class="arrow"></span>
  </div>
  <div class="active">
    <span class="glyphicon glyphicon-map-marker"></span>
    <span class="text">This is some text</span>
    <span class="arrow-bg"></span>
    <span class="arrow"></span>
  </div>
  <div>
    <span class="glyphicon glyphicon-map-marker"></span>
    <span class="text">This is some text</span>
    <span class="arrow-bg"></span>
    <span class="arrow"></span>
  </div>
  <div>
    <span class="glyphicon glyphicon-map-marker"></span>
    <span class="text">This is some text</span>
  </div>
</div>

progress.sass

$secondary: #f8971d
$bar-grey: #bababa
$bar-light: #f9f9f9

.se-progress
  background: $bar-grey
  margin: 50px
  height: 60px
  display: flex
  div
    cursor: pointer
    flex: 1
    margin: auto
    position: relative
    border: none
    height: 56px
    margin: 2px
    background: $bar-light
    text-transform: uppercase
    padding: 10px 0px 10px 35px
    &.active
      background: $secondary
      margin: 0px
      height: 60px
      padding-top: 12px
      &:nth-child(5)
        margin-right: -4px
      .text
        color: $bar-light
      .glyphicon
        color: $secondary
        background: $bar-light
      .arrow-bg
        border-top: 30px solid transparent
        border-bottom: 30px solid transparent
        border-left: 20px solid $bar-light
      .arrow
        border-top: 30px solid transparent
        border-bottom: 30px solid transparent
        border-left: 20px solid $secondary
    &:first-child
      padding-left: 14px
      z-index: 10
    &:nth-child(2)
      right: 1px
      z-index: 9
    &:nth-child(3)
      right: 2px
      z-index: 8
    &:nth-child(4)
      right: 3px
      z-index: 7
    &:nth-child(5)
      right: 4px
      margin-right: -2px
      z-index: 6
    .text
      position: relative
      bottom: 5px
      margin-left: 5px
      color: $bar-grey
    .glyphicon
      font-size: 24px
      background: $bar-grey
      padding: 5px
      border-radius: 50%
      color: $bar-light
    .arrow
      position: absolute
      right: -20px
      top: 0px
      width: 0 
      height: 0 
      border-top: 28px solid transparent
      border-bottom: 28px solid transparent
      border-left: 20px solid $bar-light
    .arrow-bg
      position: absolute
      right: -22px
      top: 0px
      width: 0 
      height: 0 
      border-top: 28px solid transparent
      border-bottom: 28px solid transparent
      border-left: 20px solid $bar-grey