Css only breadcrumb example

HTML

<div class="tri"></div>

<ul>

</ul>

CSS

ul {
    float: left;
}
.tri{
  padding:10%;
  margin:5%;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:30px solid blue; 

}
li {
    float: left;
    list-style: none;
}

a {
    position: relative;
    float: left;
    padding: 10px 10px 10px 20px;
    background: rgba(210,210,210,1);
}

a:after {
    content:"";
    float: left;
    position: absolute;
    z-index: 1;
    top: 0;
    right: -10px;
    border-color: transparent transparent transparent rgba(150,150,150,1);
    border-style: solid;
    border-width: 20px 0 20px 10px;
}
a:before {
   
    content:"";
    float: left;
    position: absolute;
    z-index: 2;
    top: 0;
    right: -8px;
    border-color: transparent transparent transparent rgba(210,210,210,1);
    border-style: solid;
    border-width: 20px 0 20px 10px;
}

JavaScript

/* breadcrumb */