CSS triangles

Demo:

See the Pen CSS triangles 1 by James Alexander Lee (@jamesl1001) on CodePen

How it works:

The edges of CSS borders are bevelled. This means that whenever the border-width is greater than 1px, the corners of the borders will be joined with a diagonal line. Like so:

See the Pen CSS triangles 2 by James Alexander Lee (@jamesl1001) on CodePen

We can exploit these delicious diagonal lines by making the width and height of the element both equal zero:

See the Pen CSS triangles 3 by James Alexander Lee (@jamesl1001) on CodePen

Then make three of the four borders transparent:

See the Pen CSS triangles 4 by James Alexander Lee (@jamesl1001) on CodePen

TRIANGLE!!!!

You can now play with the border-widths to achieve different shape triangles:

See the Pen CSS triangles 5 by James Alexander Lee (@jamesl1001) on CodePen

Posted Sunday, September 16th, 2012 under Scrapbook.

Tags: ,

Leave a Reply

*