drawing triangle using CSS

Question

I recently discovered that triangles can be created using pure css using the border property on a div with 0 width and height. Although its very simple to get this using css, I am curious on how by making border-left and border-right transparent makes a arrow up?

As far as I know when we set the border-bottom to say 10px and make the left and right border it should become a rectangle and not a triangle with side edges transparent.

Please explain how this works. I am sure I am wrong but curious on the clarifications.

give different color to each border of an empty box sized to 0, and you will see 4 triangles . borders meet in corners :) add transparent color to any border and see what's left to see. play with border-width too for all or each borders — G-Cyrillus, Apr 11 '14 at 11:09

score 0 · Answer 1 · answered Apr 11 '14 at 10:57

Adjacent borders can not overlap. To draw the borders, the browser draws an invisible line from the outer corner of the border to the inner corner of the border. Each border applies to only one side of this line.

So, if you set

div
{
    border: none;
    border-bottom: 4px solid black;
}

you get a rectangular border, because your right and left borders have 0 width. So the line from the outer corner of the border to the inner corner of the border is a vertical line.

But if you do

div
{
    border: 4px solid transparent;
    border-top: none;
    border-bottom: 4px solid black;
    height: 0px;
    width: 0px;
}

Now there are left and right borders, even if you can't see them. So the 'invisible line', goes up 4 pixels and right 4 pixels (for the left bottom corner). On the upper side the browser doesn't pain, and on the down side it paints black. If the element has 0 height (for left / right borders) or 0 width (for top / bottom borders), then the inner corners of the border overlap, and you get that triangle.

drawing triangle using CSS

1 Answers1