CSS面包屑箭头指向左

时间:2016-09-06 13:03:41

标签: html css

我发现这个css面包屑指向右边,我想指向左边。相信我,我一遍又一遍地尝试,没有任何成功。请有人告诉我该怎么做。



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您可以反转border-leftmarginposition属性来实现此目的。这是代码示例。

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>