We are approaching easter, and I couldn’t resist to make eggs on the project I am working on these days:
The trick is really easy. CSS border radius can be applied in ellipsis shapes. Each corner has a vertical and a horizontal radius. So you really just have to change the vertical radius of each corner like this:
And voila, the 60% and 40% vertical radius will do the trick.
I can highly recommend this really interesting presentation from Lea Verou on border-radius. It’s 14 minutes and highly worth the time.
Also, CSS Tricks has a collection of pre-cooked css shapes for inspiration: CSS-Tricks.com:ShapesOfCSS