老师,请问这个五角星要怎么写

老师,请问这个五角星要怎么写

五角星要怎么写

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

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

2回答
好帮手慕夭夭 2020-05-25 18:57:19

@程序员我的梦同学你好,问题解答如下:

1.宽高设置为0,是因为当宽高为0,只设置边框时,边框就会形成三角。如下

div设置宽高以及边框

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

观察如下 当设置的边框很粗时,border表现为梯形:

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

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

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

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

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

所以一个盒子宽高为0,只设置边框时,就会形成4个小三角。这就是边框自身的特点,记住即可。如果留一个三角,就给其他三个设置透明色即可哦。

2.同学描述给上边框设置黄色,不知道具体从哪里看来的。上一位老师回答的例子中,并没有设置黄色。所以同学参考本次老师演示的效果去看就好理解了。如下:

从边框的表现形式上看,如果只给上边框设置一个颜色,其他设置透明色,就会实现一个朝下的粉色箭头。

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

祝学习愉快~

  • 明白了明白了 谢谢老师
    2020-05-26 10:03:37
好帮手慕慕子 2020-04-29 11:05:49

同学你好, 可以参考如下解析理解:

五角星的形成:可以先实现一个三角形:

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

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

效果:

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

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

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

然后通过旋转、定位等方式让它们重叠在一起:

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

效果:

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

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

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

效果:

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

旋转并定位,让它重叠在另外两个上面:

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

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

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

之后改为同一个颜色(黄色)即可。这些定位、旋转数据都是自己一点一点调试的,同学可以测试下

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

  • 老师,宽和高都设置为0是什么意思呢,为什么border-top:24px solid yellow;显示的是下三角形呢,为什么border-right,border-left设置出来的是三角形呢
    2020-05-25 14:40:37
  • 老师在上面回复了哦
    2020-05-25 18:57:39
  • 神奇!!!!
    2020-05-28 11:01:59
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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