Jun
28
2015

Simple arrow breadcrumb using CSS

Today i am going to share my simple arrow breadcrumb which i have been using since quite a time now on my projects.

 

CSS Code:

.breadcrumb {
  padding: 10px 0; 
  background: #f5f5f5;
}
.breadcrumb a {
  padding: 5px 0 5px 15px; 
  margin-right: 10px; 
  overflow: hidden;
  color: #fff;
  background-color:#412673; 
  text-decoration: none; 
}
.breadcrumb a:hover {
  background-color: #34cc64;
}
.breadcrumb a:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    margin-top:-4px;
    border-style: solid;
    border-width: 13px 0 13px 13px;
    border-color: transparent transparent transparent #412673;
}
.breadcrumb a:hover:after {
    border-color: transparent transparent transparent #34cc64;
}


.breadcrumb a:not(:first-child):before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    margin-top:-4px;
    margin-left: -15px;
    border-style: solid;
    border-width: 14px 0 14px 14px;
    border-color: transparent transparent transparent #f5f5f5;
}
.breadcrumb a:last-child {
  margin-right: 15px;
}

See the Pen WvdERY by Dinesh Thapa Magar (@cybermandu) on CodePen.

About the Author: Dinesh Thapa Magar

I am web designer from Nepal. I specialize in CSS HTML designs. You can visit my website.