老师看看O不OK
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin: 0;
padding: 0;
}
.flag{
width: 600px;
height: 400px;
background: red;
margin: 100px auto;
position: relative;
}
.stars{
width: 0;
height: 0;
border-top: 40px solid yellow;
border-right: 65px solid transparent;
border-left: 65px solid transparent;
position: absolute;
top: 80px;
left: 40px;
}
.stars::after{
display: block;
content: "";
width: 0;
height: 0;
border-top: 40px solid yellow;
border-right: 65px solid transparent;
border-left: 65px solid transparent;
position: absolute;
left: -65px;
top: -40px;
transform: rotate(-146deg);
}
.stars::before{
display: block;
content: "";
width: 0;
height: 0;
border-top: 40px solid yellow;
border-right: 65px solid transparent;
border-left: 65px solid transparent;
position: absolute;
left: -65px;
top: -40px;
transform: rotate(-70deg);
}
.s2{
transform: scale(0.3) rotate(20deg) translate(300px,-350px);
}
.s3{
transform: scale(0.3) rotate(49deg) translate(290px,-400px);
}
.s4{
transform: scale(0.3) rotate(70deg) translate(300px,-400px);
}
.s5{
transform: scale(0.3) rotate(20deg) translate(450px,150px);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="flag">
<div class="stars"></div>
<div class="s2 stars"></div>
<div class="s3 stars"></div>
<div class="s4 stars"></div>
<div class="s5 stars"></div>
</div>
</body>
</html>
我还不是特别理解translate的函数规则，调了半天才把位置调得差不多，用定位会比较方便
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星