请老师批改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

同学你好,代码实现效果整体是可以的。

但是五角星顶部有一点没有重合

https://img.mukewang.com/climg/61a03d7309e1feb602590153.jpg

可以调整一下旋转角度,参考:

https://img.mukewang.com/climg/61a03d98091e7c8905900308.jpg

祝学习愉快!

0

0 学习 · 17877 问题

查看课程