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

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

伪元素有什么用途?视频上说伪元素(befor)(after)是在元素之前之后加上新内容,那么画五角星,先利用border画出等腰三角形,然后旋转,那是怎么利用伪元素实现五个角的呢?原理是什么?不太明白伪元素

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

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

2回答
小于飞飞 2017-02-11 22:11:30

相当于拆成三个三角形,然后通过角度和旋转叠加在一起。看看下图,在思考下:

http://img1.sycdn.imooc.com/climg//589f1b5900014c1302220203.jpg

三个颜色代表元素本身和它的:befroe,:after 做的三个三角形。希望对你有帮助,祝学习愉快,欢迎采纳。

小于飞飞 2017-02-10 14:29:18

其实一样的思路,伪元素(befor)(after)是在元素内容之前之后加上新内容,其实元素本身和它的:befroe,:after 做三个三角形。只不过他们旋转的角度不同和位置不同,使其我们所需的三个三角形叠加起来,形成我们所要的五角行。希望对你有帮助,祝学习愉快,欢迎采纳。

  • 提问者 慕粉0826402518 #1
    那岂不是只能把五角星拆成三个部分?可以拆成更多部分吗?用before,after要怎么实现?关于五角星怎么拆成三部分不明白怎么拆
    2017-02-11 13:02:44
  • 小于飞飞 回复 提问者 慕粉0826402518 #2
    简单可以拆成三块,使用伪类实现,淡然也可以拆多个,然后定位拼接,不过相对来说会麻烦些。
    2017-05-12 17:45:48
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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