<div class="breadcrumb-wrapper-arrows">
  <div class="breadcrumb">
    <div class="item">
      <div class="content">
        <a href="#">Home</a>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <a href="#">Page</a>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <a href="#">Page</a>
      </div>
    </div>
    <div class="item active">
      <div class="content">
        <a href="#">Page active</a>
      </div>
    </div>
  </div>
</div>

<div class="breadcrumb-wrapper-rounded">
  <div class="breadcrumb">
    <div class="item done">
      <div class="content">
        <a href="#">Page</a>
      </div>
    </div>
    <div class="item done">
      <div class="content">
        <a href="#">Page</a>
      </div>
    </div>
    <div class="item active">
      <div class="content">
        <a href="#">Page active</a>
      </div>
    </div>
    <div class="item todo after-active">
      <div class="content">
        <a href="#">Page todo</a>
      </div>
    </div>
    <div class="item todo">
      <div class="content">
        <a href="#">Page todo</a>
      </div>
    </div>
  </div>
</div>

$bg-active: #673ab7;
$bg-item: #7e57c2;

$breadcrumb-height: 50px;
$half-breadcrumb-height: calc(#{$breadcrumb-height} / 2);
body {
  background: #222;
}
.breadcrumb-wrapper-arrows {
  width: 95%;
  margin: 1rem;
  font-family: "Sans-serif";
  
  .breadcrumb {
    display: flex;
    justify-content: stretch;
    align-items: center;
    .item {
      flex: 1;
      position: relative;
      height: $breadcrumb-height;
      background: $bg-item;
      display: flex;
      align-items: center;
      justify-content: center;
      &:nth-child(n+2)::before {
        content: '';
        position: absolute;
        top: 0;
        left: 1px;
        z-index: 2;
        width: 0;
        height: 0;
        
        border: $half-breadcrumb-height solid transparent;
        border-left-color: #FFF;
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: calc(#{$breadcrumb-height} / -1);
        z-index: 4;
        width: 0;
        height: 0;
        
        border: $half-breadcrumb-height solid transparent;
        border-left-color: $bg-item;
        
      }
      &.active {
        background: $bg-active;
        &::after {
          border-left-color: $bg-active;
        }
      }
      .content {
        a {
          text-decoration: none;
          color: #000;
        }
      }
      
    }
  }
}

$bg-done: #fff;
$bg-active: #fff;
$bg-todo: #673ab7;

.breadcrumb-wrapper-rounded {
  width: 95%;
  font-family: "Sans-serif";
  margin: 1rem;
  
  .breadcrumb {
    display: flex;
    justify-content: stretch;
    align-items: center;
    .item {
      flex: 1;
      position: relative;
      height: $breadcrumb-height;
      background: $bg-item;
      display: flex;
      align-items: center;
      justify-content: center;
      
      border-top: 3px solid $bg-done;
      border-bottom: 3px solid $bg-done;
      &:last-child {
        border-radius: 0 30px 30px 0;
        border-right: 3px solid $bg-done;
      }
      &:first-child {
        border-radius: 30px 0 0 30px;
        border-left: 3px solid $bg-done;
      }
      
      &::after {
        
      }
      
      &.done {
        background: $bg-done;
      }
      &.active {
        background: $bg-active;
        &::after {
          
        }
      }
      &.todo {
        background: $bg-todo;
        z-index: 0;
        &.after-active {
          &::before {
            content: '';
            position: absolute;
            left: calc(#{$half-breadcrumb-height} / -1);
            top: -3px;
            height: calc(#{$breadcrumb-height});
            width: $breadcrumb-height;
            background: $bg-active;
            border-radius: 50%;
            border: 1px solid $bg-active;
            z-index: 0;
          }
        }
      }
      .content {
        a {
          text-decoration: none;
          color: #000;
        }
      }
    }
  }
}