创建一个有5片叶子的css花

Question

我正在尝试创建一个有5片叶子的css花，但没有任何有希望的尝试。我试图创建的内容：CSS花有5片叶子，每片叶子可以有三种不同的状态（小、中、大）。我发现http://rossmcneil.com/create-a-simple-css-raindrop/到目前为止，但我有troubel覆盖5个形状并更改大小。也许我有人可以给我一个如何实现这一目标的建议。谢谢

Answer 1

您可以为每个矩形添加一个串X和串Y。

 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叶花朵演示的结果。