请老师批改2-13
来源:2-13 编程练习
Cynthia4660559
2021-11-25 22:42:15
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>2-3</title> <style type="text/css"> /* 此处写代码*/ *{ margin: 0; padding: 0; } .background{ width: 600px; height: 400px; background-color: red; margin: 100px auto; position: relative; } .n1{ width: 0; height: 0; border: 20px solid transparent; border-top-color: yellow; position: absolute; top: 50px; left: 50px; transform: scaleX(1.5) } .n2{ content: ''; width: 0; height: 0; border: 20px solid transparent; border-top-color: yellow; position: absolute; transform: rotate(73deg) scaleX(1.5); top: 42px; left: 39px; } .n3{ content: ''; width: 0; height: 0; border: 20px solid transparent; border-top-color: yellow; position: absolute; transform: rotate(-73deg) scaleX(1.5); top: 42px; left: 59px; } .a1{ transform: scale(0.4) translate(-211px,95px) rotate(23deg); } .a2{ transform: scale(0.4) translate(-185px,236px) rotate(46deg); } .a3{ transform: scale(0.4) translate(-243px,386px) rotate(69deg); } .a4{ transform: scale(0.4) translate(-390px,481px) rotate(92deg); } </style> </head> <body> <!-- 此处写代码 --> <div class="background"> <div> <div class="n1"></div> <div class="n2"></div> <div class="n3"></div> </div> <div class="a1"> <div class="n1"></div> <div class="n2"></div> <div class="n3"></div> </div> <div class="a2"> <div class="n1"></div> <div class="n2"></div> <div class="n3"></div> </div> <div class="a3"> <div class="n1"></div> <div class="n2"></div> <div class="n3"></div> </div> <div class="a4"> <div class="n1"></div> <div class="n2"></div> <div class="n3"></div> </div> </div> </div> </body> </html>
1回答
好帮手慕星星
2021-11-26
同学你好,代码实现效果整体是可以的。
但是五角星顶部有一点没有重合
可以调整一下旋转角度,参考:
祝学习愉快!
相似问题