如何使用CSS将边框放在三角形上？

Question

我正在使用带箭头的水平线的导航栏上工作，我想在三角形中放置一个边框，如下所示：

我希望它像：

以下是清单：

   <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，那我怎么能反过来呢？我的意思是顶部的三角形指针？

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的底部边框），而不是旋转您的小方块45°，你就完成了。

Answer 2

您可以使用 THIS 代码创建基于CSS的三角形。

对于你需要的一种方法，可以使用2个三角形，一个黑色和一个白色，然后将白色的一个移动到下方，只显示1px的黑色，从而产生一种中风幻觉：）

<强> FIDDLE

<强>代码：

                a:target:before,
                a:target:after {
                    content: '';
                    position: absolute;
                    bottom: 0px;
                    left: 50%;
                    margin-left: -4px;
                    width: 0; 
                    height: 0; 
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;

                    border-bottom: 5px solid black;
                }
                a:target:after{
                    bottom: -1px;
                    border-bottom-color: #fff;
                }

<强>结果：

Answer 3

DEMO

a:target:before,
a:target:after {
    position: absolute;
    border: 8px solid transparent;
    border-style:solid;
    -webkit-text-stroke: 1px black;
    bottom: -1px;
    display: block;
    border-bottom: 8px solid #fff;
    content: '';
    line-height: 0;

}

a:target:before {
    border-width: 0 8px 8px 8px;
    z-index: 2;
    left: 50%;
    margin-left: -8px;
}
a:target:after {
    border-bottom: 9px solid #000;
    border-width: 0 9px 9px 9px;
    z-index: 1;
    left: 50%;
    margin-left: -9px;
}