我发现这个 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>
您可以反转border-left , and margin , position属性来实现这一点。这是代码示例。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
