<ul class="breadcrumb__nav">
  <li class="breadcrumb__item">
    <a href="#" class="breadcrumb__link"><span class="breadcrumb__text">Home</span></a>
  </li>
  <li class="breadcrumb__item">
    <a href="#" class="breadcrumb__link"><span class="breadcrumb__text">Content</span></a>
  </li>
  <li class="breadcrumb__item">
    <a href="#" class="breadcrumb__link"><span class="breadcrumb__text">Articles</span></a>
  </li>
  <li class="breadcrumb__item">
    <span class="breadcrumb__text">Current article about breadcrumbs</span>
  </li>
</ul>

$breadcrumb-top-layer: 100; // z-index value
$space-between-items: 0.5em;
$background: #686868;
$color: #e6e6e6;
$accent: #ffd200;
$first-bg: #161616;
$first-color: $accent;
$hover-color: #e6e6e6;
$hover-bg: #00a39b;

.breadcrumb__nav {
  overflow: hidden;

  display: flex;
  width: 100%;
  max-width: 900px;
  height: 1.5em;
  margin: auto;
  padding: 0;

  list-style: none;
  font-size: 20px;
  line-height: 1em;
  background-color: $background;
}

.breadcrumb__item {
  flex: none;
  position: relative;

  @for $n from 1 through 10 {
    $z: $breadcrumb-top-layer - $n;
    &:nth-child(#{$n}) {
      z-index: $z;
    }
  }
}

.breadcrumb__item,
.breadcrumb__item > * {
  display: inline-flex;
  align-items: center;
  height: inherit;
}

.breadcrumb__link {
  position: relative;
  z-index: inherit;

  color: $color;
  background-color: $background;
}

.breadcrumb__item:first-child > .breadcrumb__link {
  color: $first-color;
  background-color: $first-bg;
}

.breadcrumb__item:not(:first-child) > .breadcrumb__link {
  padding-left: #{$space-between-items};
}

.breadcrumb__item > .breadcrumb__link:hover,
.breadcrumb__item > .breadcrumb__link:focus {
  color: $hover-color;
  background: $hover-bg;
}

.breadcrumb__text {
  position: relative;
  padding: 0 #{$space-between-items};
  z-index: $breadcrumb-top-layer;
}

.breadcrumb__item:last-child > .breadcrumb__text {
  max-width: 100%;
  padding-left: #{$space-between-items * 2};

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb__link::after,
.breadcrumb__link::before {
  content: "";
  position: absolute;
  right: #{$space-between-items * -1};
  z-index: -1;

  display: block;
  height: 50%;
  height: calc(50% + 0.5px); // Add half a pixel to avoid sub-pixel gap
  width: #{$space-between-items * 2};

  border-right: 1px solid $accent;
  background-color: inherit;
}

.breadcrumb__link::before {
  top: 0;

  transform-origin: bottom right;
  transform: skewX(30deg);
}

.breadcrumb__link::after {
  bottom: 0;

  transform-origin: top right;
  transform: skewX(-30deg);
}

// Default styling for my pen

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;

  font-size: 16px;
}

body {
  display: flex;
  margin: 0;

  color: #e6e6e6;
  background-color: #e6e6e6;
}

a {
  text-decoration: none;
}