Creating a css flower with 5 leaves

Question

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.

Answer 1

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/

Answer 2

Why not, it's fun:

http://jsfiddle.net/v5WxW/

mess with the angles as you'd like

@-webkit-keyframes spin {
    from{
        -webkit-transform : rotate(0deg);
    }
    to{
        -webkit-transform : rotate(360deg);
    }
}

.drops {
    -webkit-animation: spin 10s linear infinite;
    width            : 376px;
    height           : 294px;
}

.raindrop{
    background                      : lightblue;
    width                           : 80px;
    height                          : 80px;
    position                        : absolute;

    border-radius                   : 100px;
    -webkit-border-radius           : 100px;
    -moz-border-radius              : 100px;

    border-top-right-radius         : 0;
    -webkit-border-top-right-radius : 0;
    -moz-border-radius-topright     : 0;

    transform                       : rotate(-45deg);
    -webkit-transform               : rotate(-45deg);
    -moz-transform                  : rotate(-45deg);
    -o-transform                    : rotate(-45deg);
    -ms-transform                   : rotate(-45deg);

    transition                      : all 2s;
    -webkit-transition              : all 2s;
    -moz-transition                 : all 2s;
    -o-transition                   : all 2s;
    -ms-transition                  : all 2s;
}

.raindrop.sm {
    width                           : 60px;
    height                          : 60px;
    position                        : absolute;

    border-radius                   : 75px;
    -webkit-border-radius           : 75px;
    -moz-border-radius              : 75px;

    border-top-right-radius         : 0;
    -webkit-border-top-right-radius : 0;
    -moz-border-radius-topright     : 0;
}

.raindrop.lg {
    width                           : 100px;
    height                          : 100px;
    position                        : absolute;

    border-radius                   : 125px;
    -webkit-border-radius           : 125px;
    -moz-border-radius              : 125px;

    border-top-right-radius         : 0;
    -webkit-border-top-right-radius : 0;
    -moz-border-radius-topright     : 0;
}

.raindrop.green  { background : lightgreen; }
.raindrop.yellow { background : yellow;     }
.raindrop.orange { background : orange;     }
.raindrop.teal   { background : teal;       }
.raindrop.pink   { background : pink;       }


.raindrop:nth-child(1){
    transform                       : rotate(-72deg);
    -webkit-transform               : rotate(-72deg);
    -moz-transform                  : rotate(-72deg);
    -o-transform                    : rotate(-72deg);
    -ms-transform                   : rotate(-72deg);
    top                             : 159px;
    left                            : 159px;
}
.raindrop:nth-child(2){
    transform                       : rotate(-144deg);
    -webkit-transform               : rotate(-144deg);
    -moz-transform                  : rotate(-144deg);
    -o-transform                    : rotate(-144deg);
    -ms-transform                   : rotate(-144deg);
    top                             : 110px;
    left                            : 188px;
}
.raindrop:nth-child(3){
    transform                       : rotate(-216deg);
    -webkit-transform               : rotate(-216deg);
    -moz-transform                  : rotate(-216deg);
    -o-transform                    : rotate(-216deg);
    -ms-transform                   : rotate(-216deg);
    top                             : 27px;
    left                            : 136px;
}
.raindrop:nth-child(4){
    transform                       : rotate(-288deg);
    -webkit-transform               : rotate(-288deg);
    -moz-transform                  : rotate(-288deg);
    -o-transform                    : rotate(-288deg);
    -ms-transform                   : rotate(-288deg);
    top                             : 98px;
    left                            : 108px;
}
.raindrop:nth-child(5){
    transform                       : rotate(0deg);
    -webkit-transform               : rotate(0deg);
    -moz-transform                  : rotate(0deg);
    -o-transform                    : rotate(0deg);
    -ms-transform                   : rotate(0deg);
    top                             : 147px;
    left                            : 76px;
}

Answer 3

Another implementation of a basic 5 leaves flower:

<i><i><i><i><i></i></i></i></i></i>
<style>
i {
  display: inline-block;
  width: 0; height: 0;
  padding: 40px 20px;
  background: rgba(0,0,0,.2);
  transform: rotate(72deg);
  border-top-left-radius: 99px;
  border-bottom-right-radius: 99px;
}
</style>

You can definitely fiddle with the angles. Have a look at the result in this 6 leaves flower demo.