老师,帮忙看下作业
来源: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回答
同学你好,效果实现是对的,建议优化:可以将样式相同的代码,使用组合选择器书写在一起,简化代码,示例:
祝学习愉快~
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1