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.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.