Sorin D. Sorin D. - 3 months ago 12
CSS Question

CSS breadcrumb arrow pointing left

I found this css breadcrumb pointing right and I want to point to the left. Believe me that I tried over and over without any success. Please someone show me how to do it.



div span {
display:inline-block;
position: relative;
background: #88b7d5;
padding-left:30px;
padding-right:30px;
line-height:40px;
text-align:center;
height:40px;
margin-right:-1px;

}

div span:after, div span:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index:2;
}

div span:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 20px;
margin-top: -20px;
}
div span:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #FFF;
border-width: 22px;
margin-top: -22px;
}

<div>
<span>Home</span>
</div>




Answer

You can invert the border-left , and margin , position properties to achieve this. Here goes the code sample.

div span {
  display: inline-block;
  position: relative;
  background: #88b7d5;
  padding-left: 30px;
  padding-right: 30px;
  line-height: 40px;
  text-align: center;
  height: 40px;
  margin-left: -1px;
}
div span:after,
div span:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
div span:after {
 
  
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #88b7d5;
  border-width: 20px;
  margin-top: -20px;
}
div span:before {
 
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #FFF;
  border-width: 22px;
  margin-top: -22px;
  
}
<div style="margin-left:30px;">
  <span>Home</span>
  <span>Home</span>
</div>