老师这样可以吗
来源：2-8 编程练习
慕前端4396110
2019-04-15 17:59:05
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
section{
width:800px;
height:550px;
background:red;
margin:0 auto;
}
div{
width:0;
height:0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:70px solid yellow;
position:relative ;
top:100px;
left:30px;
}
div:before{
display: block;
width:0;
height:0;
content:"";
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:70px solid yellow;
position: absolute;
left:-100px;
transform:rotate(71deg);
}
div::after{
display: block;
width:0;
height:0;
content:"";
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:70px solid yellow;;
position: absolute;
left:-100px;
transform:rotate(-71deg);
}
.div1{
transform:rotate(180deg) scale(.7);
}
.div2{
transform:rotate(135deg) scale(.2);
top:-60px;
left:110px;
}
.div3{
transform:rotate(165deg) scale(.2);
top:-70px;
left:160px;
}
.div4{
transform:rotate(180deg) scale(.2);
top:-70px;
left:160px;
}
.div5{
transform:rotate(135deg) scale(.2);
top:-70px;
left:110px;
}
</style>
</head>
<body>
<section>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</section>
</body>
</html>
1回答
-
同学你好，代码实现效果是不错的，很棒哦！
继续加油~
0
相似问题