A while ago, I visited the IBM Lotusphere 2012 conference page. One thing that I noticed immediately, was their beautiful logo on the background. Although it's design is very minimal and simple, the logo just looks very good.
I wanted to recreate this logo using only HTML and CSS3. The main key to this effect is using the border-radius and overflow:hidden properties. I've created two versions: One that uses extra HTML elements, the second one uses CSS3 pseudo elements.
Technique #1: Extra HTML elements
This technique is pretty straightforward: It uses extra HTML elements to get the desired shape. If you look in the source code, you'll find the (over)use of elements.
Technique #2: CSS3 Pseudo Elements
By using CSS3 pseudo elements, we can get rid of the extra HTML we needed in the previous technique in order to create the desired shapes. Take a look at the source code, it looks a lot cleaner. The CSS isn't very much different as well.
Reference
This is a reference image to see the original logo. As you can see, the differences are minimal.
