Tantek Çelik makes polygons with CSS. Works in Mozilla and recent IEs. Very interesting. I've always eschewed big borders the way I avoided Dallas' "big hair" styles, so I hadn't thought of doing this before.

But the stylesheet and even the HTML are quite complicated -- because he's re-using and cascading abstractly.

My goal here is to simplify the styles as much as possible. Running this through the Radio weblog software was a disaster, by the way. Probably the html was just too invalid for browsers to deal with.

Take a very simple case:

Here are the styles:

border-bottom: 1em solid blue;
border-top: 1em solid blue;
border-left: 1em solid yellow;
border-right: 1em solid yellow;

A triangle:

Now it's easy to imagine that if the width is one pixel, but there are left and right margins, you could make a triangle by displaying only the bottom border.

The html can be as simple as:

<a class="triangle"></a>

And here are the styles:

border-bottom:4em solid blue;
border-top: none;
border-left:2em solid transparent;
border-right: 2em solid transparent;

display:-moz-inline-block;
display:inline-block;

margin:0;
height:0;
width: 1px;

In this triangle, the height is the border-bottom size, and the width comes from the size of the border-left and border-right.

A hexagon:

Now think about a hexagon. The top of a hexagon is shaped like the bottom border, and the bottom of a hexagon is shaped like the top border. You just need to get the sizes right. CSS makes this easier. Use ems to get the right relationship between the sizes, and set the font-size in pixels to determine the actual size of the hexagon.

The html can be:

<a class="houter"><b class="htop"></b><b class="hbottom"></b></a>

And here are the styles.

.htop {
border-left: solid blue;
border-right: solid blue;
border-bottom: solid;
border-top: none;
}
.hbottom {
border-left: solid yellow;
border-right: solid yellow;
border-top: solid;
border-bottom: none;
}
.htop, .hbottom {
display:-moz-inline-block;
vertical-align: text-bottom; /* keeps together in moz */
color: green;
display: inline-block;
margin: 0;
height: 0;
border-width: 4.33em 2.5em;
width: 5em;
}
.houter {
font-size: 10px;
border:none;
display:inline-block;
text-align:center;
width: 10em;
height: 8.66em;
}

Note that the houter element is required by MacIE to get the shape right. MacIE also requires at least an HTML 4 strict DTD. MacIE 5 refuses to display the width of the hexagon if you use no DTD or the HTML 4 transitional DTD. The "vertical-align: text-bottom" is required for Mozilla.

Meanwhile, Mozilla has a problem using the strict DTD. I see a horizontal stripe in the middle of the hexagon with the strict DTD, but not when there is no DTD at all, or a transitional DTD. This page isn't actually valid strict HTML 4.01, so it's possible that Mozilla would handle the hexagon properly if the HTML were valid. But I see that problem on Tantek's page with the octagon. His page is probably valid.

A better hexagon:

Just make the left and right borders transparent to make a more friendly hexagon:

An unscaled hexagon:

To prevent the horizontal line in Mozilla, but keep the strict DTD, I've removed the font-size styling: