I like how San-X characters (like Rilakkuma and Ko-Rilakkuma) are very simple, and yet manage to look very cute. It must be in the proportions (massive foreheads, wide-set eyes, etc.) and smooth shapes.
I tried to recreate Rilakkuma’s face in using the CSS properties border-radius and transform.
Here is Rilakkuma:
Of course I had to make his friend with the red button, Ko-Rilakkuma, too:
A curvy snout with border-radius
For Rilakkuma’s white snout, I used with the border-radius property to create the downward slope on the top curve.
The radius values are defined clockwise, starting at the top-left corner. The first four values are the horizontal radii, and second four following the slash are the the vertical radii.
Notice how the first two border-radius definitions (top-left and top-right, both 200px) are longer than the following two definitions (bottom-right and bottom-left, both140px)
Rotation points with transform
I used transform to make the upside-down “V”-shaped mouth. I made two rectangular lips, rounded their edges, and then rotated them at the nose. To define the rotation point, I used transform-origin. Then transform specifies the degrees.
These bears should work in current -webkit, -o, and -moz browsers, but sadly, not IE. It looks like IE9 beta should support it.
Supported in: Opera (version 10.5+) Safari (version 4+) Chrome (version 5+) Mozilla Firefox (version 1.0+)
Here is an IE8 screenshot. Oh no, it’s Robo-Ko-Rilakkuma!