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

Have a look here for explanation see here. Basically you will need a rectangle and four triangles or a parallelogram and two rectangles. Depends what you want to achieve.