<div class="container">
  <div class="breadcrumb">
    <a href="#">
      <span class="breadcrumb__inner">
        <span class="breadcrumb__title">Website Root</span>
        <span class="breadcrumb__desc">First Item</span>
      </span>
    </a>
    <a href="#">
      <span class="breadcrumb__inner">
        <span class="breadcrumb__title">Page Depth 02</span>
        <span class="breadcrumb__desc">Second Item</span>
      </span>
    </a>
    <a href="#">
      <span class="breadcrumb__inner">
        <span class="breadcrumb__title">Page Depth 03</span>
        <span class="breadcrumb__desc">Third Item</span>
      </span>
    </a>
    <a href="#">
      <span class="breadcrumb__inner">
        <span class="breadcrumb__title">Page Depth 04</span>
        <span class="breadcrumb__desc">Fourth Item</span>
        <span class="breadcrumb__desc">With Additional Line</span>
      </span>
    </a>
    <a href="#">
      <span class="breadcrumb__inner">
        <span class="breadcrumb__title">Page Depth 05</span>
      </span>
    </a>
  </div>
</div>

$base: 38px;

* {margin: 0; padding: 0; box-sizing: border-box}

html, body {
  height: 100%; 
  background-color: #333;
}
  
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 480px;
  padding: 0 40px;
}

.breadcrumb {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  margin: auto;
  text-align: center;
  top: 50%;
  width: 100%;
  height: $base * 1.5;
  transform: translateY(-50%);
  box-shadow: 0 1px 1px rgba(0,0,0,1),
              0 4px 14px rgba(0,0,0,0.7);
  z-index: 1;
  background-color: #ddd;
  font-size: 14px;
}

  .breadcrumb a {
    position: relative;
    display: flex;
    flex-grow: 1;
    text-decoration: none;
    margin: auto;
    height: 100%;
    padding-left: $base;
    padding-right: 0;
    color: #666;
  }

    .breadcrumb a:first-child {
      padding-left: $base / 2.5;
    }

    .breadcrumb a:last-child {
      padding-right: $base / 2.5;
    }

    .breadcrumb a:after {
      content: "";
      position: absolute;
      display: inline-block;
      width: $base * 1.5;
      height: $base * 1.5;
      top: 0;
      right: $base / 1.35 * -1;
      background-color: #ddd;
      border-top-right-radius: 5px;
      transform: scale(0.707) rotate(45deg);
      box-shadow: 1px -1px rgba(0,0,0,0.25);
      z-index: 1;
    }

      .breadcrumb a:last-child:after {
        content: none;
      }

  .breadcrumb__inner {
    display: flex;
    flex-direction: column;
    margin: auto;
    z-index: 2;
  }

    .breadcrumb__title {
      font-weight: bold;
    }

.breadcrumb a.active, .breadcrumb a:hover{
  background: darken(tomato, 20%);
  color: white;
}

.breadcrumb a.active:after, .breadcrumb a:hover:after {
  background: darken(tomato, 20%);
  color: white;
}

// 1000px
///////////////////////
@media all and (max-width: 1000px) {
  .breadcrumb {
    font-size: 12px;
  }
}

// 710px
///////////////////////
@media all and (max-width: 710px) {
  .breadcrumb__desc {
    display: none;
  }
  
  .breadcrumb {
    height: $base;
  }
  
  .breadcrumb a {
    padding-left: $base / 1.5;
  }
  
  .breadcrumb a:after {
      content: "";
      width: $base * 1;
      height: $base * 1;
      right: $base / 2 * -1;
      transform: scale(0.707) rotate(45deg);
    }
}