麻烦老师检查下 总感觉不对
来源:2-8 编程练习
张凤梅
2020-01-21 13:40:03
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
.container{
width: 500px;
height: 300px;
background-color:red;
margin: auto;
position:relative;
}
.diva{
left:50px;top: 70px;
position: absolute;
width: 0;height: 0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:35px solid yellow;
transform:rotate(35deg);
}
.diva:before{
content:"";
position: absolute;
left:-50px;top: 0;
width: 0;height: 0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:35px solid yellow;
transform:rotate(-70deg);
}
.diva:after{
content:"";
position: absolute;
left:-35px;top:-28px;
width: 0;height: 0;
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-bottom:55px solid yellow;
transform:rotate(-35deg);
}
.div2{
transform:scale(0.3) rotate(50deg);
left: 150px;top: 20px;
}
.div3{
transform:scale(0.3) rotate(-50deg);
left:180px;top: 50px;
}
.div4{
transform: scale(0.3) rotate(40deg);
left:180px;top:90px;
}
.div5{
transform: scale(0.3) rotate(50deg);
left: 150px;top:120px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="div1 diva"></div>
<div class="div2 diva"></div>
<div class="div3 diva"></div>
<div class="div4 diva"></div>
<div class="div5 diva"></div>
</div>
</body>
</html>1回答
好帮手慕粉
2020-01-21
同学你好,代码效果实现的是可以的。继续加油,祝学习愉快~
相似问题