Creating triangles using borders

Question

I recently needed to create speech bubbles. To create the little triangular tip at the end of the speech bubble, i used a css technique where the element is given a 0 width and 0 height and given borders. Making certain borders transparent would create diagonals.

This works great, and i am able to manipulate different borders to create triangles/shapes to my liking. The problem is, i don't fully understand why this works. I understand that it all starts out with a rectangle and as you set one or more of the borders to transparent it creates a diagonal. My question is how does this work ? And why does it create a diagonal in the first place ?

EDIT: To clarify, i would like to know the theory behind why this technique works.

Answer 1

I think your title would be best written, "Creating triangles using borders," as right now it sounds as though you want borders around your triangles.

Think of a picture frame. It's made of four parts, each with 45 degree ends which meet with the other frame parts. If the border was so short that the 45 degree ends actually touched at inner edge, you would have a triangle.

And example would be the top frame border:

----------------
\______________/

Reduced 50%

---------
\_______/

Reduced in width so that edges meet, forming a triangular shape:

--
\/

If this were the only visible frame border, you would have the effect of seeing a triangular shape.

Answer 2

This is the best I can come up with: http://jsfiddle.net/kuG6X/