SCSS

by Gowtham Reddy

HTML

<ul class="nav-stepper-wrapper">
  <li class="nav-stepper-item">
    <div class="heading">
        <span></span>
        <span>Define Requirement</span>
    </div>
  </li>
  <li class="nav-stepper-item">
     <div class="heading">
        <span></span>
        <span>Manage Applications</span>
    </div>
  </li>
  <li class="nav-stepper-item">
     <div class="heading">
        <span></span>
        <span>Selection Process</span>
    </div>
  </li>
  <li class="nav-stepper-item">
     <div class="heading">
        <span></span>
        <span>Manage Offers</span>
    </div>
  </li>
</ul>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);
li{
  list-style: none;
}

.nav-stepper-wrapper{
 display: flex;

 .nav-stepper-item{
    height: 40px;
   position: relative;
    width: 180px;
        font-family: Lato-Regular;
    font-size: 12px;
    color: #4C6274;
    letter-spacing: 0;
    line-height: 14px;
    background: rgba(79,154,82,0.4);
    &::after{
     content: '';
    position: absolute;
    width: 40px;
    right: 0;
    height: 40px;
    top: 0;
    z-index: 9;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    transform: rotate(-45deg);
    }
    .heading{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  }
}