I have designed a unique custom breadcrumb with an arrow shape :
<ol class="breadcrumb-arrow">
<li class="active"><a href="#">1. Foo<span class="arrow"></span></a> </li>
<li ><a href="#">2. Blah<span class="arrow"></span></a></li>
</ol>
CSS:
.breadcrumb-arrow {
padding: 0;
margin: 0;
height: 30px;
line-height: 30px;
list-style-type: none;
}
.breadcrumb-arrow li {
float: left;
background-color: black;
}
.breadcrumb-arrow li.active {
background-color: pink;
}
.breadcrumb-arrow li.active a span {
border-left-color: pink;
border-top-color: grey;
border-bottom-color: grey;
}
.breadcrumb-arrow li.active ~ li {
background-color: grey;
}
.breadcrumb-arrow li.active ~ li a {
color: black;
}
.breadcrumb-arrow li.active ~ li a span {
border-left-color: grey;
border-top-color: grey;
border-bottom-color: grey;
}
.breadcrumb-arrow li a {
color: white;
float: left;
position: relative;
padding: 0 20px 0 10px;
text-decoration: none;
}
.breadcrumb-arrow li a span {
position: absolute;
display: block;
height: 0;
width: 0;
line-height: 0px;
right: 0px;
top: 0px;
border-left: 10px solid black;
border-right: none;
border-top: 15px solid pink;
border-bottom: 15px solid pink;
}
The active element will be in pink, the ones already done will be in black, and the ones to be done will be in grey. I referenced this tutorial for the design inspiration : It's functional but I want to add 2px of white (arrow shaped) spacing between each breadcrumb element. I believe I need to use the :after selector.
Despite trying, I couldn't achieve it. Does anyone have any ideas?
Maybe something like this :
.breadcrumb-arrow li a span:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
}
I struggled to make it work as intended. Here is a plunker showcasing the issue : http://plnkr.co/edit/Hp9sBSpyiFvTLbw2lCg3?p=preview