请老师检查作业
来源：2-13 编程练习
鱼档卖鱼
2021-12-13 21:13:03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.spec {
width: 600px;
height: 400px;
margin: 100px auto;
background-color: red;
position: relative;
}
.spec .box {
width: 0;
height: 0;
border: 30px solid transparent;
border-top: 20px solid yellow;
position: absolute;
left: 90px;
top: 120px;
}
.spec .box::before {
content: "";
width: 0;
height: 0;
border: 30px solid transparent;
border-top: 20px solid yellow;
position: absolute;
transform: rotate(70deg);
left: -44px;
top: -30px;
}
.spec .box::after {
content: "";
width: 0;
height: 0;
border: 30px solid transparent;
border-top: 20px solid yellow;
position: absolute;
transform: rotate(292deg);
left: -18px;
top: -30px;
}
.spec .c1 {
transform: scale(1.8);
}
.spec .c2 {
left: 180px;
top: 30px;
transform: rotate(20deg) scale(0.5);
}
.spec .c3 {
left: 220px;
top: 75px;
transform: rotate(45deg) scale(0.5);
}
.spec .c4 {
left: 220px;
top: 135px;
transform: rotate(65deg) scale(0.5);
}
.spec .c5 {
left: 180px;
top: 180px;
transform: rotate(85deg) scale(0.5);
}
</style>
</head>
<body>
<div class="spec">
<div class="box c1"></div>
<div class="box c2"></div>
<div class="box c3"></div>
<div class="box c4"></div>
<div class="box c5"></div>
</div>
</body>
</html>
1回答
-
好帮手慕慕子
2021-12-14
同学你好，效果实现是对的，建议优化：使用组合选择器，将样式相同的代码书写在一起，简化代码，如下：
祝学习愉快~
0
相似问题