正在回答 回答被采纳积分+1
1回答
小于飞飞
2017-01-22 11:54:13
你好，自己动手对知识及理解更深刻，给个简单思路，思考并动手试一试：
》通过边框设置一个三角，然后旋转三角调整角度，在然后通过after\before设置三角形，然后通过不同的旋转，拼成五角星。
CSS代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style type="text/css"> #jiao1 { width: 0;height: 0; margin: 300px 300px;color: #f00; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #f00; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);} #jiao1::after { ......}/*同上请思考*/ #jiao1::before { ......}/*同上请思考*/ } |
HTML代码：
1 2 3 | <div id="jiao1"></div><div id="jiao2"></div>...... |
最后设置每个五角星的位置，缩放及旋转。希望对你有帮助，祝学习快乐
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧