请老师检查
来源：2-13 编程练习
慕UI4313976
2021-03-06 15:44:58
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
.flag{
width: 600px;
height: 400px;
background-color: red;
margin: 100px auto;
position: relative;
}
.star1{
position: absolute;
top: 100px;
left: 50px;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
.star1::after{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -69px;
transform: rotate(70deg);
}
.star1::before{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -70px;
transform: rotate(-70deg);
}
.star2{
position: absolute;
top: 21px;
left: 157px;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
transform: scale(0.2) rotate(30deg);
}
.star2::after{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -69px;
transform: rotate(70deg);
}
.star2::before{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -70px;
transform: rotate(-70deg);
}
.star3{
position: absolute;
top: 70px;
left: 192px;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
transform: scale(0.2) rotate(-10deg);
}
.star3::after{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -69px;
transform: rotate(70deg);
}
.star3::before{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -70px;
transform: rotate(-70deg);
}
.star4{
position: absolute;
top: 132px;
left: 200px;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
transform: scale(0.2) rotate(0deg);
}
.star4::after{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -69px;
transform: rotate(70deg);
}
.star4::before{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -70px;
transform: rotate(-70deg);
}
.star5{
position: absolute;
top: 182px;
left: 161px;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
transform: scale(0.2) rotate(20deg);
}
.star5::after{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -69px;
transform: rotate(70deg);
}
.star5::before{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid yellow;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
position: absolute;
top: -49px;
left: -70px;
transform: rotate(-70deg);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="flag">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
</div>
</body>
</html>
写回答
1回答
-
好帮手慕星星
2021-03-06
同学你好，代码实现效果很棒！
优化：关于五角星的形式样式重复了，共用一个类实现就好，然后再用各自的类控制缩放即可
上面是举个例子，记得把.star3,.star4,.star5多余的样式注释掉。
祝学习愉快！
0
