麻烦老师检查一下！
来源：2-8 编程练习
leiyihai
2019-09-28 13:44:55
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
.bg{
width:420px;
height:280px;
background:red;
}
.star1{
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
transform:rotate(180deg);
position:relative;
left:30px;
top:50px;
}
.star1::before,.star1::after{
content:"";
display:block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
}
.star1::before{
position:relative;
left:-40px;
transform:rotate(70deg);
}
.star1::after{
position:relative;
left:-40px;
top:-30px;
transform:rotate(-70deg);
}
.star2{
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
transform:translate(100px,-20px) rotate(-10deg) scale(0.3);
}
.star2::before,.star2::after{
content:"";
display:block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
}
.star2::before{
position:relative;
left:-40px;
transform:rotate(70deg);
}
.star2::after{
position:relative;
left:-40px;
top:-30px;
transform:rotate(-70deg);
}
.star3{
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
transform:translate(120px,-20px) rotate(10deg) scale(0.3);
}
.star3::before,.star3::after{
content:"";
display:block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
}
.star3::before{
position:relative;
left:-40px;
transform:rotate(70deg);
}
.star3::after{
position:relative;
left:-40px;
top:-30px;
transform:rotate(-70deg);
}
.star4{
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
transform:translate(120px,-20px) rotate(35deg) scale(0.3);
}
.star4::before,.star4::after{
content:"";
display:block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
}
.star4::before{
position:relative;
left:-40px;
transform:rotate(70deg);
}
.star4::after{
position:relative;
left:-40px;
top:-30px;
transform:rotate(-70deg);
}
.star5{
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
transform:translate(100px,-20px) rotate(60deg) scale(0.3);
}
.star5::before,.star5::after{
content:"";
display:block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:30px solid yellow;
}
.star5::before{
position:relative;
left:-40px;
transform:rotate(70deg);
}
.star5::after{
position:relative;
left:-40px;
top:-30px;
transform:rotate(-70deg);
}
</style>
</head>
<body>
<section class="bg">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
</section>
</body>
</html>写回答
1回答
-
好帮手慕夭夭
2019-09-28
你好同学，效果实现的非常棒，老师要表扬一下。希望同学继续加油哦，祝学习愉快！
0
相似问题