Squiggle using CSS

Question

I am building the basic Set card patterns. I can do colours, numbers and fillings, and I have the diamond and oval shapes. Please see my progress in this fiddle.

The last piece of the puzzle is to build a squiggle class for the "squiggle" shape. How can I do the squiggle shape using CSS?

Answer 1

I'm pretty sure you'll have to resort to SVG for shapes like that.

SVG might also make your life easier for those other shapes too. On my Safari 6.0.2 I see a few small CSS rendering artifacts:

In particular, the spacing of the striped diamond due to how transform works (texture mapping) produces something that doesn't quite look completely uniform. You'll need to scale up this screenshot to see the artifacts at the corners of the diamond.

Basically, CSS is not meant for drawing shapes. SVG is meant for drawing shapes. Therefore since you are trying to draw shapes, there's a much higher chance you'll succeed with SVG.

Good job with the diamonds, though. (Note also SVG ought to work on platforms not supporting CSS3 3D; it is a neat trick to skew/scale square to make a diamond but at the end of the day its more or less a hack)