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

Question

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?

@PhotographyBum I want to add a black border in the `triangle`. @kamesh Check the fiddle — user3093453, Aug 20 '14 at 04:56
Take a look at this: http://jhaurawachsman.com/2013/css-triangles-border-stroke/ — azeós, Aug 20 '14 at 04:56
you can generate triangle border from here: http://apps.eky.hk/css-triangle-generator/ — Kinjan Koradiya, Aug 20 '14 at 04:57

Roko C. Buljan · Accepted Answer · 2014-08-20T05:44:08.243

2

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.

edited Aug 20 '14 at 05:44

answered Aug 20 '14 at 05:34

Roko C. Buljan

196,159
39
305
313

Neat, I think this is the best solution though OP is using safari .. you might need to add `-webkit-` prefix for transform. – Imran Bughio Aug 20 '14 at 05:41
I would like to point that IE8 & below don't support transform. – Imran Bughio Aug 20 '14 at 05:49
1

@ImranBughio For IE8 use: http://stackoverflow.com/questions/22665189/rotate-element-using-css-in-ie8-for-45deg – Roko C. Buljan Aug 20 '14 at 05:52
@RokoC.Buljan if I added `body { background:#1d428a; } for example the color of `triangle` occupies it – user3093453 Aug 20 '14 at 05:54
1

@user3093453 as I said in my answer, use the same background color for the `:after` element (`#1d428a`) – Roko C. Buljan Aug 20 '14 at 05:55
@user3093453 otherwise wrap your navigation inside an `overflow:hidden` element and the arrow will not stick out of it. – Roko C. Buljan Aug 20 '14 at 05:59
@RokoC.Buljan hi, what if I want to do this one on hover? how could I do that? – user3093453 Feb 13 '15 at 06:17
1

@user3093453 use the `:hover` pseudo. – Roko C. Buljan Feb 13 '15 at 09:01

Imran Bughio · Answer 2 · 2014-08-20T05:31:23.517

1

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

edited Aug 20 '14 at 05:31

answered Aug 20 '14 at 05:13

Imran Bughio

4,811
2
30
53

Please check my updated question I provided the source but I don't know on how to make the triangle to reverse – user3093453 Aug 20 '14 at 05:23
I think the link you just added is using the same trick as i am here ... did you check my fiddle isnt it what you want to achieve ? – Imran Bughio Aug 20 '14 at 05:24
I just check the the **[LINK](http://jhaurawachsman.com/2013/css-triangles-border-stroke/)** it's using the same technique as i am using here. – Imran Bughio Aug 20 '14 at 05:27
Yes but your `triangle` is not that straight I guess, I mean it's not pointed at all – user3093453 Aug 20 '14 at 05:33
what do you mean ? i have added a screenshot as well how is it not pointing ? – Imran Bughio Aug 20 '14 at 05:34
Oh I see it's not that good in `Safari`. And lastly why is it not centered? – user3093453 Aug 20 '14 at 05:36
hm you are right it renders badly in safari & Firefox for some reason - and yes i missed alignment. – Imran Bughio Aug 20 '14 at 05:44
I'm accepting Roco's answer, I'll give you upvote tho. – user3093453 Aug 20 '14 at 05:46
Yes i agree Roco's Method is smart & Thanks :) – Imran Bughio Aug 20 '14 at 05:48

score 0 · Answer 3 · answered Aug 20 '14 at 05:38

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

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

3 Answers3