Dynamic drive block breadcrumbs

breadcrumbs.css

/***********
    Breadcrumbs
    http://css-tricks.com/triangle-breadcrumbs/
*/
.breadcrumb { 
  list-style: none; 
  overflow: hidden; 
  font-size: 0.8em;
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li a {
  color: #dcdcdc;
  text-decoration: none; 
  padding: 10px 0 10px 45px;
  background: #323232;                   /* fallback color */
  background: hsla(0,0%,20%,1);
  position: relative; 
  display: block;
  float: left;
}
.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,0%,20%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}       
.breadcrumb li a:before { 
  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 #686868;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
}       
.breadcrumb li:first-child a {
  padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(0,0%,25%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(0,0%,25%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(0,0%,35%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(0,0%,35%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(0,0%,45%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(0,0%,45%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(0,0%,55%,1); color: #3c3c3c; }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(0,0%,55%,1); }

.breadcrumb li:last-child a {
  /* background: transparent !important; */
  /* text-decoration: underline; */
  /* color: black; */
  pointer-events: none;
  cursor: default;
}

.breadcrumb li:last-child a:after {
   /* border: transparent !important;  */
}
.breadcrumb li a:hover { background: hsla(210,100%,40%,1); }