Search code examples
cssstylesoverlayindicator

Creating a css flower with 5 leaves

I am trying to create a css flower with 5 leaves - without any promising attempt. What I am trying to create: CSS flower with 5 leaves where every leave can have three different states(small, medium, large). I have found http://rossmcneil.com/create-a-simple-css-raindrop/ so far - but I have troubel to overlay 5 shapes and change the size. Maybe I somebody can give me an advice how to achieve this. Thanks.

Solution

  • You could add a skewX and skewY to each rectangle.

     transform: skewX(value);  /* e.g. skewX(25deg) */

    Here is what it would look like:

    http://jsfiddle.net/SKbAz/2/