一开始不知道怎么写星星，也不知道怎么用五个DIV控制，搜了点资料勉强完成，请导师帮忙看看。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
div{
width:600px;
height:400px;
margin:0px auto;
background:red;
position:relative;
}
.div{
width:0px;
height:0px;
top:50px;
border-top:40px solid yellow;
border-right:80px solid transparent;
border-left:80px solid transparent;
position:relative;
transform:rotate(deg);
margin-bottom:80px;
}
div.div:before{
content:"";
width:0px;
height:0px;
border-bottom:80px solid transparent;
border-right:40px solid yellow;
border-top:80px solid transparent;
position:absolute;
transform:rotate(-20deg) translate(21px,-95px);
}
div.div:after{
content:"";
width:0px;
height:0px;
border-bottom:80px solid transparent;
border-left:40px solid yellow;
border-top:80px solid transparent;
position:absolute;
transform:rotate(deg);
transform:rotate(20deg) translate(-61px,-80px);
}
.div:first-child{
transform:scale(.7) translate(40px,40px);
position:absolute;
}
.div:last-child{
transform:scale(.3) translate(450px,400px) rotate(15deg);
position:absolute;
}
.div:nth-child(2){
transform:scale(.3) translate(600px,250px);
position:absolute;
}
.div:nth-child(3){
transform:scale(.3) translate(600px,50px) rotate(-15deg);
position:absolute;
}
.div:nth-child(4){
transform:scale(.3) translate(450px,-100px) rotate(15deg);
position:absolute;
}
</style>
</head>
<body>
<div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星