<div class="steps steps_animation">
  <div class="steps__item">
    <span class="steps__content">
      1. Шаг первый
    </span>
  </div>
  <div class="steps__item">
    <span class="steps__content">
      2. Шаг второй
    </span>
  </div>
  <div class="steps__item">
    <span class="steps__content">
      3. Шаг третий
    </span>
  </div>
</div>

<div class="steps">
  <div class="steps__item steps__item_active">
    <span class="steps__content">
      1. Шаг первый
    </span>
  </div>
  <div class="steps__item">
    <span class="steps__content">
      2. Шаг второй
    </span>
  </div>
  <div class="steps__item">
    <span class="steps__content">
      3. Шаг третий
    </span>
  </div>
</div>

<div class="steps">
  <div class="steps__item">
    <span class="steps__content">
      1. Шаг первый
    </span>
  </div>
  <div class="steps__item steps__item_active">
    <span class="steps__content">
      2. Шаг второй
    </span>
  </div>
  <div class="steps__item">
    <span class="steps__content">
      3. Шаг третий
    </span>
  </div>
</div>

<div class="steps">
  <div class="steps__item">
    <span class="steps__content">
      1. Шаг первый
    </span>
  </div>
  <div class="steps__item">
    <span class="steps__content">
      2. Шаг второй
    </span>
  </div>
  <div class="steps__item steps__item_active">
    <span class="steps__content">
      3. Шаг третий
    </span>
  </div>
</div>

body {
  padding: 2rem;
  background: url(https://4.bp.blogspot.com/-e3U44g-JX0w/T-s8-rGOmhI/AAAAAAAACQk/w7H7vO6Aow4/s1600/HD+Resimler+2012+%2823%29.jpg) no-repeat 50% 100%;
  background-size: cover;
  min-height:100vh;
}

$steps-height: 80px;

.steps {
  overflow: hidden;
  background: rgba(purple, 0.5);
  margin: 2rem 0;
  
  &__item {
    float: left;
    margin-left: -1px;
    font-size: 1.2rem;
    line-height: $steps-height;
    height: $steps-height;
    color: #fff;
    position: relative;
    
    &::before, &::after {
      content: '';
      position: absolute;
      right: 0;
      width: 100%;
      width: 2px;
      height: 50%;
      background: orange;
    }
    
    &::before {
      top: 0;
      transform: skewX(30deg);
      transform-origin: 100% 100%;
    }
    
    &::after {
      bottom: 0;
      transform: skewX(-30deg);
      transform-origin: 100% 0;
    }
    
    &:hover,
    &_active {
      &::before, &::after {
        width: 100%;
      }
    }
  }
  
  &__content {
    position: relative;
    z-index: 2;
    padding: 0 2rem 0 1rem;
  }
  
  &_animation &__item {
    &::before, &::after {
      transition: 0.2s ease;
    }
  }
}