css - 5枚の葉でCSSフラワーを作成する

Question

私は5枚の葉でcssの花を作成しようとしています-有望な試みはありません。私が作成しようとしているもの：すべての葉が3つの異なる状態（小、中、大）を持つことができる5枚の葉を持つCSS花。これまでにhttp://rossmcneil.com/create-a-simple-css-raindrop/を見つけましたが、5つの形状をオーバーレイしてサイズを変更するのに苦労しています。多分私は誰かが私にこれを達成する方法をアドバイスすることができます。ありがとう。

Answer 1

各長方形にskewXとskewYを追加できます。

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

これがどのように見えるかです：

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

Answer 2

なぜ、それは楽しいです：

http://jsfiddle.net/v5WxW/

あなたが望むように角度を台無しにする

@-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

基本的な5枚の葉の花の別の実装：

<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>

あなたは間違いなく角度をいじることができます。この6枚の葉の花のデモの結果を見てください。