我正在使用带有箭头的水平线的导航栏,我想像这样在三 Angular 形中放置一个边框:
我希望它是这样的:
这是列表:
<ul>
<li><a href="#foo" id="foo">foo</a></li>
<li><a href="#bar" id="bar">bar</a></li>
<li><a href="#baz" id="baz">baz</a></li>
</ul>
这是 demo
编辑:这是另一个 source ,那么我怎样才能反过来呢?我的意思是顶部的三 Angular 形指针?
最佳答案
ul{
list-style:none;
background:#ddd;
border-bottom: 1px solid #555;
}
ul li{
display:inline-block;
}
ul li a{
color:#555;
display:inline-block;
padding:10px;
text-decoration:none;
position:relative;
}
a.selected{
color:#fff;
}
a.selected:after{ /* Our arrow */
position:absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content:" ";
width:8px;
height:8px;
border: 0 solid #555;
border-width: 1px 0 0 1px;
background:#fff;
/* Now let's auto-center our arrow inside the pos. relative A parent */
left:0;
right:0;
bottom:-5px;
margin:0 auto;
}
使用 :after
在你的 a
元素,只需设置两个边框和相同的背景颜色(以覆盖 ul
的底部边框),然后将您的小方 block 旋转 45° 即可。
关于html - 如何使用CSS在三 Angular 形上放置边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25396868/