做五角星的思路是啥

要怎么样才能想到用after和before，在看别人代码之前完全想不到啊，而且就算看了代码也感觉云里雾里的，让我做也只会照搬一下，怎么才能自己想到这个东西啊，下次换个形状不就糟了。。。。

幕村拓哉 2019-09-26

源自：CSS3转换 2-8 编程练习

3

收起

3回答

美丽与智慧并存的仙女 2019-10-09 10:22:37

那你可能没有了解伪类的用法和使用，建议先深入了解一下伪类

好帮手慕言 2019-10-07 10:01:01

同学你好，top设置为负值表示元素位置会往上偏移，left设置为负值表示元素会往左偏移。

老师给同学举个例子，就能够明白了。

没有设置top和left值时元素的位置

设置之后：

页面效果：

从效果图中可以看出元素向上和向左分别偏移100px。关于五角星例子中的伪元素设置的top值和left值是可以根据效果图调整的，

同学可以写个小例子测试下，印象会更深刻些。

如果帮助到了你，欢迎采纳~祝学习愉快~

好帮手慕言 2019-09-26 11:01:02

同学你好，由于代码的灵活性，实现的方式有很多种，老师这里提供一种参考的思路，同学若是能想到其他思路也可以尝试下哦，即：制作五角星，做出三个三角图形然后通过旋转角度最后通过定位把它们组合在一起，例：

代码参考：

不使用after和before也是可以的，因为代码具有灵活性，能够实现效果就可以哦。

绘制形状需要自己去摸索哦，是没有捷径的，别人能够写出来，也是通过一点点的去调整实现的。同学要对自己有信心哦

如果帮助到了你，欢迎采纳~祝学习愉快~

兰香川川 #1

老师您好为什么伪类元素在定位时left和top值是负数呢，这个地方我不太明白

2019-10-05 18:54:38
爱健身爱踢球的程序员回复兰香川川 #2

因为他是相对与他的父元素来说的，并且对三个三角形的位置进行调整

2019-10-11 20:32:19

相似问题

绘制五角星并设置位置的思路还是很乱的？

控制五角星问题

老师五角星图案怎么弄？

五角星画图

画五角星用伪元素的原理？

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载