.breadcrumb { 
  list-style: none; 
  overflow: hidden; 
  font: 14px Courier;
  font-weight: bolder;
  margin: 2em 4em;
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li a {
  color: #111;
  text-decoration: none; 
  padding: 5px 0 3px 45px;
  background: #8b0000; /* fallback color */
  background:   hsla(0,100%,27%,1); 
  position: relative; 
  display: block;
  float: left;
}

.breadcrumb li a::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(0,100%,37%,0.35);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 0;
  left: 100%;
  z-index: 1; 
}

.breadcrumb li a::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(0,100%,27%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}

.breadcrumb li:first-child a {
  padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(0,100%,37%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(0,100%,37%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(0,100%,47%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(0,100%,47%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(0,100%,57%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(0,100%,57%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(0,100%,67%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(0,100%,67%,1); }
.breadcrumb li:last-child a {
  background: hsla(0,100%,37%,0.35) !important;
  color: #ccc;
  pointer-events: none;
  cursor: default;
}
.breadcrumb li:last-child a::after { 
  border: 0; 
}