Drawing a triangle in CSS

Question

I understand that

border-top: 50px solid transparent;

means the top border will be 50px in thickness, will be solid and will be have no colour.

I also understanding that

border-right: 100px solid red;

means the right border will be 100px thick will be solid and will be red.

But I don't understand how...

#triangle-left 
{ width: 0; 
 height: 0; 
 border-top: 50px solid transparent;
 border-right: 100px solid red; 
 border-bottom: 50px solid transparent;}

can make a triangle pointing to the left?

And help understanding would be appreciated.

score 6 · Accepted Answer · edited Aug 17 '13 at 21:53

6

CSS borders actually have diagonal edges.

Illustration:

\-------/
|       |
|       |
|       |
/-------\

So border-right actually looks like this:

/
|
|
|
\

With height:0px, border-right will also have no height thus it will look like this:

/
\

Now if you use the following css:

#triangle-left{ 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; /* this will fill the top gap */
    border-right: 100px solid red; /* this will be the red triangle */
    border-bottom: 50px solid transparent; /* this will fill the bottom gap */
}

You'll get:

CSS Triangle

A triangle pointing left.

edited Aug 17 '13 at 21:53

iConnor

19,997
14
62
97

answered Aug 17 '13 at 21:01

Yotam Omer

15,310
11
62
65

To nit-pick your first sentence, the angle is only 45 degrees if the two adjacent borders are the same size. – Spudley Aug 17 '13 at 21:22
@Spudley Yes I've already updated.. as you said it depends on the width-height ratio – Yotam Omer Aug 17 '13 at 21:33
Had to do that because jsfiddle moans – iConnor Aug 17 '13 at 21:53

Drawing a triangle in CSS

1 Answers1