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

Question

我正在尝试创建一朵有 5 片叶子的 CSS 花 - 没有任何有希望的尝试。我正在尝试创建：带有 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 叶花演示的结果。