How to put border in triangle shape using css?

Question

I am working on a navigation bar with a horizontal line with an arrow, and I want to put the border in a triangle as follows:

I want it to be like this:

Here is the list:

   <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>

And here is a demo

EDIT: here is another source , so how can I do it differently? I mean the triangle pointer at the top?

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 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

CSS, .

, , , 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;
}