CODEWITHSUNDEEP
htmlcsscss-shapes
user3093453
user3093453

Reputation: 697

How to put a border on a triangle shape using css?

I'm working on a navigation bar with horizontal line with arrow and I want to put a border in the triangle like so:
enter image description here

I want it to be like:

enter image description here

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's the demo

EDIT: here's another source, so how can I make it the other way around? I mean the triangle pointer in on the top?

Upvotes: 4

Views: 1082

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

jsBin demo

add arrow underneath selected list element

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

Using :after on your a element, just set two borders and the same background color (in order to cover the bottom border of the ul), than rotate your little square by 45° and you're done.

Upvotes: 2

John
John

Reputation: 7329

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

enter image description here

Upvotes: 0

Imran Bughio
Imran Bughio

Reputation: 4931

You can create css based triangle using THIS code.

For what you need one way to do it is use 2 triangles one black and one white then move the white one a little below to show only 1px of black, creating an illusion of stroke :)

FIDDLE

Code:

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

Result:

enter image description here

Upvotes: 1

Related Questions