How to set a border to a triangle

Question

I've tried to set a black solid 1px border for triangle: jsFiddle. I write the follwoing markup:

<div>
</div>

and styles

div{
    position: absolute;
    left:0px; 
    top:0px;
    width: 0;
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid red;
}

But I don't understand how to set the border for the triangle in this case.

Basically because the triangle **IS** a border...you can't add a **border** to it — Paulie_D, Mar 07 '14 at 11:52
But I need a triangle with the border. Did you mean that it isn't possible with CCS? — , Mar 07 '14 at 11:55
You can use the before/after pseudo element - like so http://jsfiddle.net/4ZeCz/1927/ but it looks a bit jagged.. — Nick R, Mar 07 '14 at 11:57
So as @Paulie_D said , you're essentially creating a triangle using a css trick, this explains how it's made http://codepen.io/chriscoyier/full/lotjh — ottis, Mar 07 '14 at 11:57
possible duplicate of [CSS triangle custom border color](http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color) — Adrift, Mar 07 '14 at 11:58
@DmitryFucintv - you can just increase the bottom border of the `before` pseudo element to `11px` rather than `10px;` — Nick R, Mar 07 '14 at 12:00
Also it seems to look a little better in Chrome - a bit smoother. Maybe it's just Firefox that's rendering it jagged. — Nick R, Mar 07 '14 at 12:00

score 0 · Accepted Answer · answered Mar 07 '14 at 12:13

You can try this too , basically i have made a larger triangle black in colour and put it behind the red one

<div id="border">  
</div>

 <div id="red">
 </div>


#red{
    position: absolute;
    left:4px; 
    top:9px;
    width: 0;
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid red;
    background-color:transparent;
    z-index: 99;
}

#border {
    position: absolute;
    left:0x; 
    top:0px;
    width: 5px;
    height: 10px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 12px solid black;
    z-index: 0;
}

score -1 · Answer 2 · edited Mar 07 '14 at 13:19

here is your solution its work

`div:before {
    border-bottom: 12px solid #000000;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 0;
}

div:after {
    border-bottom: 10px solid #FF0000;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 111111;
}`

How to set a border to a triangle

2 Answers2