老师,帮忙看下作业

来源:2-13 编程练习

慕莱坞5245545

2021-09-06 18:20:36

<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:200px;
background-color:red;
margin:100px auto;
position:relative;
}
.box div{
width:0;
height:0;
border:65px solid transparent;
border-top:40px solid yellow;
position:absolute;
left:-16px;
top:3px;
transform:scale(.4);
z-index:9;
}
.box div:before{
display:block;
content:"";
width:0;
height:0;
border:65px solid transparent;
border-right:40px solid yellow;
position:absolute;
left:-83px;
top:-74px;
transform:rotate(-20deg);
z-index:99;
}
.box div:after{
display:block;
content:"";
width:0;
height:0;
border:65px solid transparent;
border-left:40px solid yellow;
position:absolute;
left:-27px;
top:-73px;
transform:rotate(20deg);
z-index:999;
}
.box div:nth-child(1){
position:absolute;
left:-25px;
top:6px;
transform:scale(.4);
}
.box div:nth-child(2){
position:absolute;
left:10px;
top:-30px;
transform:rotate(20deg) scale(.13);
}
.box div:nth-child(3){
position:absolute;
left:30px;
top:-10px;
transform:rotate(30deg) scale(.13);
}
.box div:nth-child(4){
position:absolute;
left:30px;
top:15px;
transform:rotate(0deg) scale(.13);
}
.box div:nth-child(5){
position:absolute;
left:10px;
top:32px;
transform:rotate(80deg) scale(.13);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>


写回答

1回答

好帮手慕慕子

2021-09-06

同学你好,效果实现是对的,建议优化:可以将样式相同的代码,使用组合选择器书写在一起,简化代码,示例:

https://img.mukewang.com/climg/6135ec51097f7c4405450506.jpg

祝学习愉快~

0

0 学习 · 17877 问题

查看课程