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!
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.