html - 如何使用CSS在三 Angular 形上放置边框？

Question

我正在使用带有箭头的水平线的导航栏，我想像这样在三 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 形指针？

Answer 1

jsBin demo

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° 即可。