Rilakkuma in CSS3

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.

Live demo

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.

border-radius: 200px 200px 140px 140px / 160px 160px 140px 140px;

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.

Browser compatibility

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!