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

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

use this i thing usefull for you.

and any another shape please visited this link http://www.css3shapes.com/