Slanted lines using Borders

First of all: There are no images on this page. No Flash-animation, no nothing. It is all one self-contained page.

Fun with borders, or how I learned to love the empty box

A box with no content (and a line height of 0px to make IE happy) and 50px borders on each side, in different colors.

Size:100x100

Size:50x50

Size:10x10

Size:0x0

This is Houston, we have a PYRAMID!

Now test if this browser allows transparent borders (as per errata to CSS2). The left, red, triangle should now be transparent.

Change the border widths individually (80/20 instead of 50/50).

Change the border widths individually (100/0 instead of 50/50).

Ok, now notice the corners. Those is simply two colors separarted by a slanted edge. Now we change the colors and sizes of the borders.

Circle (rough)

And, my logo.

And now some psychadelica