请老师批改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
同学你好,代码实现效果整体是可以的。
但是五角星顶部有一点没有重合

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

祝学习愉快!
相似问题