老师麻烦检查下
来源：2-8 编程练习
Liiiu
2020-09-11 16:14:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 600px;
height: 400px;
background:red;
margin: 100px auto;
}
.star{
width: 0px;
height: 0px;
position: relative;
top: 18%;
left: 8%;
border-top: 30px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid transparent;
}
.star::before {
content: "";
width: 0px;
height: 0px;
position: absolute;
top: -53px;
left: -40px;
border-top: 30px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid transparent;
transform: rotate(-142deg);
}
.star::after{
content: "";
width: 0px;
height: 0px;
position: absolute;
top: -38px;
left: -36px;
border-top: 30px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid transparent;
transform: rotate(-72deg);
}
.div2{
transform: scale(.3) rotate(-45deg);
top: -52px;
left: 142px;
}
.div3{
transform: scale(.3) rotate(45deg);
top: -75px;
left: 170px;
}
.div4{
transform: scale(.3);
top: -84px;
left: 174px;
}
.div5{
transform: scale(.3) rotate(-45deg);
top: -105px;
left: 141px;
}
</style>
</head>
<body>
<div class="box">
<div class="star"></div>
<div class="star div2"></div>
<div class="star div3"></div>
<div class="star div4"></div>
<div class="star div5"></div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕星星
2020-09-11
同学你好，代码布局以及实现效果很棒。继续加油，祝学习愉快！
0
相似问题