CSS/LESS: Arrow Breadcrumb Navigation
//Registration Form Breadcrumb
.rf-breadcrumb {
list-style: none;
margin-top: 20px;
position: relative;
overflow: hidden;
font: 16px Helvetica, Arial, Sans-Serif;
li {
float: left;
a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: #950212; /* fallback color */
background: hsla(353,97%,30%,1);
position: relative;
display: block;
float: left;
&: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: 50px solid @red;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
&:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid darken(@red, 6%);
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 4px;
left: 100%;
z-index: 1;
}
}
}
//actives
li.active a {
background: #ebe7e6;
color: @red;
&:after { border-left-color: #ebe7e6 !important; }
}
li.visited a {
background: @gold;
color: white;
&:after { border-left-color: @gold !important; }
}
li:first-child a{
color: white;
padding-left: 25px;
}
}