老师,五角星没有思路

老师,五角星没有思路

老师,五角星没有思路

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕码 2020-02-24 14:35:20

同学你好,解答如下:

一个五角星是由三个三角形组成,所以先绘制一个三角形。第一个三角绘制好之后 ,另外两个三角就是通过旋转不同的角度 (transform: rotate(<angle>); angle指旋转角度),从而组成了一个五角星。

http://img1.sycdn.imooc.com//climg/5e5369190956e5be01120081.jpg

重要的是要绘制一个三角形,它的思路是如下这样:当一个盒子设置width和height为0后,整个盒子就都是由边框组成的。当给一个盒子4个角度的边框设置不同颜色的时 ,会发现它表现形式就是4个三角:

http://img1.sycdn.imooc.com//climg/5e5369cc0967092100560054.jpg

所以给其他三个角度的边框设置透明背景色(transparent),就会剩一个三角形状了。

一个五角星绘制出来了,那么其他几个绘制方法都是一样的哦。只不过是通过定位,让它们在不同的位置上显示。

参考代码:

http://img1.sycdn.imooc.com//climg/5e5369e2098745c902830068.jpg

http://img1.sycdn.imooc.com//climg/5e5369f1097521df04930543.jpg

http://img1.sycdn.imooc.com//climg/5e5369fb0996424604160314.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师