如何使用尖头边框半径作为img中的示例? 我找到了几种方法来向右或向左制作一个完整的箭头,但我只想要一个1px的边框。
我在UL和LI中建立了这个。这是因为我认为这是产生这种“面包屑”的最佳方式。
<ul>
<li>Back</li>
<li>Home</li>
<li>Events</li>
<li>Event Item</li>
</ul>
答案 0 :(得分:2)
您无法使用border-radius
执行此操作,必须使用:after
,:before
伪元素。
也可能有其他方法,但这是我个人使用的一种方法。
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: #03C9A9;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #03C9A9;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
<ul class="breadcrumb">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>