老师麻烦解答下面的问题

来源：2-13 编程练习

qq_慕慕0057983

2022-03-21 11:00:51

问题描述：
1、应该给哪个选择器设置 相对定位。 
2、应该怎么对第二个大星星进行缩小

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin:0;
padding:0;
}
.box{
position: relative;
width:800px;
height:600px;
background-color:red;
overflow:hidden;
}
.box div:nth-child(1){
position: relative;
margin-top:100px;
margin-left:50px;
width: 0;
height: 0;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(32deg);
}

.box div:nth-child(1)::before{
content: '';
position: absolute;
width: 0;
height: 0;
top:-44px;
left: -45px;
display: block;
border-left: 20px solid transparent;
border-bottom: 60px solid gold;
border-right: 20px solid transparent;
transform: rotate(-32deg);
}

.box div:nth-child(1)::after{
content: '';
position: absolute;
width: 0;
height: 0;
top:3px;
left: -80px;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(-66deg);
}


.box div:nth-child(2){
margin-top:100px;
margin-left:50px;
width: 0;
height: 0;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(32deg);
}

.box div:nth-child(2)::before{
content: '';
position: absolute;
width: 0;
height: 0;
top:-44px;
left: -45px;
display: block;
border-left: 20px solid transparent;
border-bottom: 60px solid gold;
border-right: 20px solid transparent;
transform: rotate(-32deg);
}

.box div:nth-child(2)::after{
content: '';
position: absolute;
width: 0;
height: 0;
top:3px;
left: -80px;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(-66deg);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div>️</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

写回答

1回答