I created this simple logo some time ago (was actually for the release of 11.04) for a friend who is an Ubuntu fanboi.

To tackle this, I broke up the logo into several basic shapes and then created each shape individually. I then placed all the shapes together to form the final image. Initially I used margin to place each shape, but opted for translate instead as I wanted to fiddle with some CSS3 properties.

The three basic shapes are the 3 circles (outer orange, white and inner smaller orange circle). I then created rectangles that I rotated and placed in the correct place to form the three separate segments of the white circle.

To create the smaller circle on each segment, I created a plain white circle with a slightly larger orange one to act as the "negative" space in the segment.

This has been made purely out of css, no images.

I have not tested this in IE or Opera but the above views fine on Firefox,Safari and Chrome.

If there are any problems (like unalignment) or if it doesnt render properly in any way, please let me know where and how it is breaking and what browser and version you are using. Thanks!

/*  If you are interested in learning how to create logos in CSS, here is a nice example - CSS Android HoneyComb Logo

The article is in Russian (if u dont mind using an auto translate plugin or letting chrome do this automatically for you) , but the code is fine. */