请老师检查
来源：2-13 编程练习
芜湖呼
2022-01-03 12:23:34
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin: 0;
padding: 0;
}
section{
width: 600px;
height: 400px;
background-color: red;
margin: 0 auto ;
padding-top: 100px;
padding-left: 50px;
}
div{
position: relative;
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 70px solid yellow;
}
div::before{
position: absolute;
top: -70px;
left: -100px;
content: "";
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 70px solid yellow;
transform: rotate(72deg);
}
div::after{
position: absolute;
top:-70px;
left:-100px;
content: "";
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 70px solid yellow;
transform: rotate(-70deg);
}
.second{
bottom: 170px;
left: 150px;
transform: rotate(30deg) scale(.3);
}
.third{
bottom: 170px;
left: 200px;
transform: rotate(40deg) scale(.3);
}
.fourth{
bottom: 150px;
left: 200px;
transform: scale(.3);
}
.fifth{
bottom: 150px;
left: 150px;
transform: rotate(30deg) scale(.3);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<section>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
</section>
</body>
</html>写回答
1回答
-
好帮手慕然然
2022-01-03
同学你好，代码实现效果基本还不错，不过根据标准盒模型，如果给元素设置了padding的话，那么width和height要相应的减去padding的值，盒子的总大小才会保持不变，如图
祝学习愉快！
0
