Shape with increasing width

Question

I would like to create a shape, which starts with a certain width and then increases to the end. Currently I have this shape here:

Generated by this document . How can I style the shape, that it starts with width x and gets bigger and bigger until it reaches widtht y ?

Besides that, is it also possible to simply rotate a shape with CSS?

Answer 1

Yes it is possible with CSS3 Animation and Transform :

Heres an example I made which makes the shape grow in width and spin around endlessly:

DEMO

Heres a demo showing how you can make the shape grow until a certain width is met:

DEMO