如何制作五角星

如何制作五角星

问题描述:

这道编程怎么实现

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

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

2回答
好帮手慕言 2021-07-24 10:02:31

2、五角星实现如下:

http://img1.sycdn.imooc.com//climg/60fb71e4091785f906770552.jpg

效果:
http://img1.sycdn.imooc.com//climg/60fb71f1095f60a402190151.jpg

然后通过伪元素,再添加一个三角形:

http://img1.sycdn.imooc.com//climg/60fb72540904a33205690332.jpg

效果:
http://img1.sycdn.imooc.com//climg/60fb725f096c2f8502720144.jpg

然后通过旋转、偏移值等方式让它们重叠在一起:

http://img1.sycdn.imooc.com//climg/60fb72b109deea3805800448.jpg

效果:

http://img1.sycdn.imooc.com//climg/60fb72bc09b09d1002370157.jpg

添加伪元素,再添加一个三角形:

http://img1.sycdn.imooc.com//climg/60fb72e709fc7b7105650332.jpg

效果:
http://img1.sycdn.imooc.com//climg/60fb72f309e1752502710161.jpg

旋转并调整偏移值:
http://img1.sycdn.imooc.com//climg/60fb7320090d606605660426.jpg

这样一个五角星就布局完成了:

http://img1.sycdn.imooc.com//climg/60fb732c091448a702090170.jpg

旋转角度同学可以自己一点一点调整,让效果更美观。

祝学习愉快~

  • ​为什么伪类的宽高都是0?
    2021-09-06 22:47:08
  • 同学你好,这里用border边框实现的三角形。如果设置了宽高,那么就会是这种形状

    https://img1.sycdn.imooc.com//climg/6136f39c09ed508309190319.jpg

    中间是正方形,不是一个点,当设置其他边为透明色的时候,无法实现三角形

    https://img1.sycdn.imooc.com//climg/6136f3ea09d2952909310309.jpg

    自己再理解下,祝学习愉快!

    2021-09-07 13:09:20
好帮手慕言 2021-07-24 10:02:00

同学你好,解答如下:

1、可以实现三角形,通过三角形拼接成五角星。三角的绘制思路是通过边框实现的,看如下例子:

http://img1.sycdn.imooc.com//climg/60fb713309f9418106220457.jpg

给一个元素设置宽高以及边框

http://img1.sycdn.imooc.com//climg/60fb714709ae8e2601590160.jpg

当宽高不断减少时 , border会越趋向于三角形 , 如下:

http://img1.sycdn.imooc.com//climg/60fb717a099a94a200730064.jpg

当宽高为0时,border变成了三角 , 如下:

http://img1.sycdn.imooc.com//climg/60fb718e09c6e1f700680059.jpg

一个三角就是把其他角度的边框都设置为透明transparent,留一个角度的边框即可。

​内容较多,老师会回复两条。

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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