Fold with CSS
I am creating basic Set card templates . I can do colors, numbers and fillings, and I have diamond and oval shapes. Check out my progress in this script .
The last piece of the puzzle is to create a class squiggle
for the "squiggle" form. How can I make a squiggle form using CSS?
source to share
I'm sure you'll have to resort to SVG for shapes like this.
SVG can also make your life easier for other shapes. On my Safari 6.0.2, I see some small artifacts for CSS:
In particular, the distance between the striped diamond, due to the way transform
(texture mapping) works , creates something that doesn't quite look completely uniform. You will need to enlarge this screenshot to see the artifacts in the corners of the diamond.
Basically, CSS is not meant for drawing shapes. SVG is for drawing shapes. Therefore, since you are trying to draw shapes, you are much more likely to be successful with SVG.
Nice work with diamonds. (Note that SVG should work on platforms that don't support CSS3 3D, this is a neat trick to distort / scale a square to make a diamond, but more or less a hack at the end of the day)
source to share