Pure CSS Progress Arrows

Progress arrows for a cart path using just CSS and :before and :after

by sendil J

HTML

<h4>
  Student Termination
</h4>
<div id="tabs" class="m-tabs">
  <ul id="progress" class="m-nav m-nav-tabs">
    <li class="is-active m-nav-item">
      <span class="m-nav-itemlink">Termination Details</span></li>
    <li class="m-nav-item">
      <span class="m-nav-itemlink">R2T4 Input</span></li>
    <li class="m-nav-item">
      <span class="m-nav-itemlink">R2T4 Result</span></li>
    <li class="m-nav-item">
      <span class="m-nav-itemlink">Approve Termination</span></li>

  </ul>
  <div id="content1" class="m-tab-content">
    <div class="m-tab-pane m-detailbox-body">
      <div class="formRow">
        <div style="display:inline-block;" class="left">
          Student*
        </div>
        <div style="display:inline-block;">
          <input type="text" />
        </div>
      </div>
      <div class="formRow">
        <div style="display:inline-block;vertical-align: top;" class="left">
          Enrollment*
        </div>
        <div style="display:inline-block;">
          <div>

            <label>
              <input type="radio" name="enrollment" checked/> Enrollment 1 (Currently attending)</label>
          </div>
          <div>
            <label>
              <input type="radio" name="enrollment" /> Enrollment 2 (Currently attending)</label>
          </div>
          <div>
            <label>
              <input type="radio" name="enrollment" /> Enrollment 3 (Transfered)</label>
          </div>
        </div>
      </div>
      <div class="formRow">
        <div style="display:inline-block;" class="left">
          Status*
        </div>
        <div style="display:inline-block;">
          <select>
            <option>Select</option>
          </select>
        </div>
      </div>
      <div class="formRow">
        <div style="display:inline-block;" class="left">
          Drop reason*
        </div>
        <div style="display:inline-block;">
          <select>
            <option>Select</option>
          </select>
        </div>
    ...

CSS

* {
  box-sizing: border-box;
}

#progress {
  padding: 0;
  list-style-type: none;
  font-family: arial;
  font-size: 12px;
  clear: both;
  line-height: 1em;
  margin: 0 -1px;
  text-align: center;
}

#progress li {
  float: left;
  padding: 10px 30px 10px 40px;
  background: #B7D5F1;
  color: #fff;
  position: relative;
  /* border-top: 1px solid #666;
  border-bottom: 1px solid #666;*/
  width: 32%;
  margin: 0 1px;
  cursor: pointer;
}

#progress li:before {
  content: '';
  border-left: 16px solid #fff;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}

#progress li.is-active:first-child:before {
  border-left: 16px solid #6F8CC4;
}

#progress li:first-child:before {
  border-left: 16px solid #B7D5F1;
}

#progress li.is-active:last-child:after {
  display: none;
}

#progress li:last-child:after {
  display: none;
}

#progress li:after {
  content: '';
  border-left: 16px solid #B7D5F1;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 20;
  margin-right: 10px;
}

#progress li.is-active {
  background: #6F8CC4;
  cursor: default;
}

#progress li.is-active:after {
  border-left-color: #6F8CC4;
}

.m-nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.m-nav::after {
  clear: both;
  display: table;
  content: " ";
}

.m-nav::before {
  display: table;
  content: " ";
}

.m-nav > li {
  position: relative;
  display: block;
}

.m-nav > li > .m-nav-itemlink {
  position: relative;
  display: block;
  /*padding: 10px 15px;*/
  text-decoration: none;
}


/*.m-nav-tabs {
  border-bottom: 1px solid #ddd;
}

.m-nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}*/


/*.m-nav-tabs > li > .m-nav-itemlink {
  margin-right: 2px;
  line-height: 15px;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.m-nav-tabs > li > .m-nav-itemlink:hover {
  background-color:...

TypeScript

interface NavTabOptions {
  activeIndex?: number,
  containerClass?: string,
  contentClass?: string,
  contentItemClass?: string
  navigationClass?: string,
  navigationItemClass?: string,
  navigationItemClickClass?: string
}

namespace UI {

    class TabObject {
        public navigationContainerClass: string = '.m-nav-tabs';
        public navigationItemClass: string = '.m-nav-item';
        public navigationItemClickClass: string = '.m-nav-itemlink';
        public contentClass: string = '.m-tab-content';
        public contentItemClass: string = '.m-tab-pane';
        public activeClass: string = '.is-active';

        private hideClass: string = '.u-hide';
        private showClass: string = '.u-show';

        private element: Element;
        private activeIndex: number = 0;
        private navigationArray: NodeListOf<Element>;
        private contentArray: NodeListOf<Element>;

        constructor(element: Element, options?: NavTabOptions) {
            this.setOptions(options);
            this.element = element;
            this.navigationArray = this.element.querySelectorAll(this.navigationItemClass);
            this.contentArray = this.element.querySelectorAll(this.contentItemClass);

            for (let i = 0; i < this.navigationArray.length; i++) {
                let link = this.navigationArray[i].querySelector(this.navigationItemClickClass);
                this.handleClick(link, i);
            }
            this.showTab(this.activeIndex);
        }

        public getInstance() {
            return this.element;
        }

        public gotoTab(index: number) {
            this.showTab(index);
        }

        public removeTabs() {
            let active = this.activeClass.indexOf(".") !== -1 ? this.activeClass.substring(1) : this.activeClass;
            let hide = this.hideClass.indexOf(".") !== -1 ? this.hideClass.substring(1) : this.hideClass;
            let show = this.showClass.indexOf(".") !== -1 ? this.showClass.substring(1) :...