<h1>Flexible equal breadcrumbs with arrows</h1>

<ul class="breadcrumbs">
  <li>
    Step 1
  </li>
  <li>
    Multiple<br />
    lines
  </li>
  <li class="red-arrow">
    Another color
  </li>
  <li>
    A title so long that it has to wrap no matter how crazy wide your screen might be
  </li>
</ul>

@import "compass/css3";

$color-seperator: #fff;
$color-breadcrumb: #222;
$color-alternate: red;

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: sans-serif;
}

body {
  display: flex;
  background: #ccc;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100%;
  padding: 3em;
}

.breadcrumbs {
  display: table;
  table-layout: fixed;
  overflow: hidden;
  border-radius: .2em;
  padding: 0;
  width: 100%;
  
  > li {
    display: table-cell;
    position: relative;
    padding: 1em 1em 1em 3em;
    background: $color-breadcrumb;
    border-color: $color-breadcrumb;
    color: #fff;
    text-align: center;
    vertical-align: middle;

    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 100%;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent $color-seperator;
      border-width: 8.5em 0 8.5em 1.85em;
      transform: translateY(-50%);
      z-index: 1;
    }
    &:after {
      left: 100%;
      border-width: 6.5em 0 6.5em 1.5em;
      border-left-color: inherit;
      z-index: 1;
    }

    &:last-of-type:before,
    &:last-of-type:after {
      content: none;
    }
    
    &:first-of-type {
      padding-left: 2em;
    }
  }

  .red-arrow {
    background-color: $color-alternate;
    border-color: $color-alternate;
  }
}