关于云朵具体制作的问题

我的HTML结构代码如下：

</div>

但是实在不知道该怎么去做每一朵云，比如基础形状是什么样子，通过伪类应该before，after又该怎么加形状，然后该旋转多少角度才能成为这个样子实在分析不出来，老师能给些具体的思路吗？

源自：CSS3转换 6-7 作业题

收起

1回答

卡布琦诺 2017-02-25 21:17:50

白云的形状是用三个块拼接的，要使用伪元素:after和：before去实现。白云形成的结构图如下：

提问者二农戏猪 #1

老师这是我的云朵的代码，把里面的缩放注释去掉以后，因为我用的云朵都是绝对定位父级是BOX，所以以缩放云就乱了，那这里有什么办法让云朵缩放的时候不乱掉吗？

2017-02-26 02:03:33
提问者二农戏猪 #2

代码在这里 .cloudBox{width:400px;height:200px;position:absolute;top:0;left:500px;background-color:#F00;top:100px;} .cloud{width:0;height:0; border-top:100px solid #FFF;border-radius:100px; border-left:100px solid #FFF; border-right:100px solid #FFF; border-bottom:100px solid #FFF; /*-webkit-transform:scale(.5); -moz-transform:scale(.5); -ms-transform:scale(.5); -o-transform:scale(.5); transform:scale(.5);*/ } .cloud:before{content:"";position:absolute;width:260px;height:0;top:80px;left:-140px;border:#FFF solid 50px;border-radius:50px;} .cloud:after{content:"";position:absolute;width:0;height:0;top:70px;left:-110px; border-top:#FFF 50px solid;border-radius:100px; border-left:#FFF 100px solid ; border-right:#FFF 100px solid; border-bottom:#FFF 50px solid; -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); }

2017-02-26 02:03:58
卡布琦诺回复提问者二农戏猪 #3

亲，把你的html代码贴给我哈

2017-02-27 12:03:53