How to transform each side of a shape separately?

Question

How do I create a CSS shape in which each side is transformed separately.

Something like the shape in the below image.

Answer 1

As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Each of the corner attributes will accept either one or two values. The border-radius property will accept up to two values in WebKit browsers and up to eight now in Firefox 3.5.

-moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px
border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px

Demo