老师，这样可以吗
来源：2-8 编程练习
qq_慕田峪8535900
2020-04-11 00:40:54
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
div.flag {
width:450px;
height:300px;
background-color:#f00;
margin: 0 auto;
}
div.flag > div{
width:0;
height:0;
border-left:15px solid transparent;
border-bottom:45px solid yellow;
border-right:15px solid transparent;
position:relative;
}
div.flag > div::before,
div.flag > div::after{
content: '';
display:block;
width:0;
height:0;
border-left:60px solid transparent;
border-bottom:40px solid yellow;
border-right:60px solid transparent;
position:absolute;
top:40px;
left:-59px;
}
div.flag > div:before{
transform:rotate(35deg);
}
div.flag > div:after{
transform:rotate(-35deg);
}
.star-1{
transform:scale(0.7);
top: 30px;
left: 50px;
}
.star-2{
transform:scale(0.2) rotate(20deg);
top:-30px;
left:120px;
}
.star-3{
transform:scale(0.2) rotate(50deg);
top:-50px;
left:150px;
}
.star-4{
transform:scale(0.2);
top:-65px;
left:145px;
}
.star-5{
transform:scale(0.2) rotate(20deg);
top:-80px;
left:120px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="flag">
<div class="star-1"></div>
<div class="star-2"></div>
<div class="star-3"></div>
<div class="star-4"></div>
<div class="star-5"></div>
</div>
</body>
</html>
1回答
-
好帮手慕慕子
2020-04-11
同学你好，代码实现是正确的，继续加油，祝学习愉快~
0
相似问题