css

CSS triangles

Uselesspickles has come up with a way to draw triangles using only Javascript and CSS borders. It works by adding two adjacent borders (say top and left) to a zero-height div, and making one of the borders transparent. Of course, IE (versions 6 and below) has problems with transparent borders, but this can be hacked around using filters, at the expense of designating a "transparent color" that can't be used in the document.

This technique, of course, creates only right triangles aligned with the x and y axis. But you can cover any triangle (and, by extension, any polygon) with a collection of right triangles.

Subscribe to RSS - css