Arrow-based checkout progress bar css styles. CSS vendor prefixes NOT included.

pointy_progress.js

$(document).ready(function(){
  $("a").click(function(){
    updateProgress($(this).closest('li').attr('id'));
  });
});

var updateProgress = function(clickedId) {
  console.log(clickedId);
  var progress_nodes = $('ul.progress li');
  
  for (i = 0, len = progress_nodes.length; i < len; i++) {

    if(progress_nodes[i].id.indexOf(clickedId) > -1){
      progress_nodes[i].classList.add('active');

      for (j = 0; j < len; j++) {
        if(j < i) {
          progress_nodes[j].classList.add('complete');
        } else {
          progress_nodes[j].classList.remove('complete');
        }
      }
    } else {
      progress_nodes[i].classList.remove('active');
    }
  }
}

pointy_progress.sass

$background-color-incomplete: rgba(0,0,0,0.5)
$background-color-active: rgb(0,185,105)
$background-color-complete: darken(rgb(0,235,60),27)

$color-incomplete: rgba(255,255,255,0.85)
$color-complete: white

$progress-bar-height: 100px
$progress-bar-padding: 10px
$progress-item-margin: 15px
$transition-time: 1s

//$pointy-parts-border-width: #{$progress-bar-height / 2 - $progress-bar-padding}
$pointy-parts-border-width: #{$progress-bar-height / 2}


ul.progress
  list-style: none
  width: 90%
  margin: auto
  padding: $progress-bar-padding

  background-color: rgba(0,0,0,0.5)
  height: $progress-bar-height

  display: flex
  align-items: stretch
  border-radius: 7px

  li
    display: flex
    align-items: stretch
    flex: 1

    a
      background: $background-color-incomplete
      flex: 1
      display: flex
      justify-content: center
      align-items: center
      text-align: center
      color: $color-incomplete
      font-size: 17px
      transition: $transition-time
      padding: 10px

      &::after
        transition: $transition-time
        color: transparent
        width: 0
        margin: 0 -7px 0 7px
        content: "✔"
        z-index: 100

    &:first-child a
      border-radius: 4px 0 0 4px

    &:last-child a
      border-radius: 0 4px 4px 0

    &:not(:first-child)
      margin-left: calc(#{$pointy-parts-border-width} + #{$progress-item-margin})

      &::before
        width: 0
        height: 0
        margin-left: -#{$pointy-parts-border-width}

        border-top: $pointy-parts-border-width solid $background-color-incomplete
        border-left: $pointy-parts-border-width solid transparent
        border-bottom: $pointy-parts-border-width solid $background-color-incomplete
        
        position: absolute
        content: ""
        transition: $transition-time

    &:not(:last-child)::after
      width: 0
      height: 0
      
      border-top: $pointy-parts-border-width solid transparent
      border-left: $pointy-parts-border-width solid $background-color-incomplete
      border-bottom: $pointy-parts-border-width solid transparent
      position: absolute
      content: ""
      transition: $transition-time
    

    &.active
      a
        background: $background-color-active

      &:not(:first-child)::before
        border-top: $pointy-parts-border-width solid $background-color-active
        border-bottom: $pointy-parts-border-width solid $background-color-active

      &:not(:last-child)::after
        border-left: $pointy-parts-border-width solid $background-color-active
    

    &.complete
      a
        background: $background-color-complete
        &::after
          color: $color-complete

      &:not(:first-child)::before
        border-top: $pointy-parts-border-width solid $background-color-complete
        border-bottom: $pointy-parts-border-width solid $background-color-complete

      &:not(:last-child)::after
        border-left: $pointy-parts-border-width solid $background-color-complete

pointy_progress.slim

ul.progress
  li#step-one.complete
    a step 1
  li#step-two.complete
    a step 2
  li#step-three.complete
    a ...
  li#step-four.active
    a profit
  li#step-five
    a confront troubling realities about the amorality of capitalism