如何像img中的例子一样制作一个尖锐的border-radius? 我找到了几种向右或向左制作完整箭头的方法,但我只想要 1px 的边框。
我在 UL 而不是 LI 中构建了它。这是因为我认为这是生成此“面包屑”的最佳方式。
<ul>
<li>Back</li>
<li>Home</li>
<li>Events</li>
<li>Event Item</li>
</ul>
最佳答案
你不能使用 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>
关于html - 列表中的尖边框半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37987352/