CSS Tangram

Original Experiment Date
November 1, 2003

With slanted CSS borders you could already create Regular Polygons, medals, Rotating Stars and even a CSS House. Now you can also play Tangram with CSS!

A basic tangram set consists of two large triangles, one medium triangle, two small triangles, one square and a parallellogram. These are all shapes that can easily be constructed with CSS borders. To be able to create Tangram figures however, you will need to rotate the basic shapes over various degrees. That is exactly what I have done with my Tangram Toolbox which shows all basic elements rotated over 360 degrees at 45 degree steps. Now you simply select the appropriate figure, link to the class in the stylesheet and absolutely position it to make your favourite figure!

See a basic tangram set and the running man figure.
None; just the satisfaction of having done something fun with CSS!
Browser support
Creating CSS slants requires the browser to support transparent borders (Mozilla, Opera 7.1+, IE/Mac). This particular demo also requires support for display:inline-block;, so some shapes may not work as expected in Gecko-based browsers such as Mozilla Firefox, and the demo therefore only fully works in Opera 7.1+

© 2003-2006, Mark Schenk.