This is a revision of an older article I wrote about creating triangles with a single div. What is more interesting about this method is that you don’t require any special CSS properties and it is 100% CSS 1+ compliant.

So how does this work?

I created a jsFiddle with all the shapes that can be created without CSS3. Open it for examples and source code.

Now we’ll start simply by creating something as simple as a square…

.square {
    width: 200px;
    height: 200px;
    background: #366787;
}

Ok, but that doesn’t have to do with triangles, right? So how do we hack it, to create a triangle?
Well, first of all we should set the element to width and height of 0. The trick is to play with the border.

.triangle {
    height: 0;
    border-width: 0 50px 90px;
    border-style: solid;
    border-color: #366787 transparent;
}

Notice how there is no top border, the left and the right are 50px each and the bottom border is 90px;
Also the top and the bottom border have color and the left and right are transparent.

Try it and play with the numbers. Using this method you can create a lot of other figures.

Also take a look at the source code and all the examples on jsFiddle.