2-13作业，请老师检查，另请教优化思路。
来源：2-13 编程练习
慕桂英1122475
2023-03-05 20:48:49
相关代码：
<!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>
/* 思路：先制作3个钝角三角形，将其拼成五角星，然后分别对5个五角星进行缩放、旋转，最后分别绝对定位到红旗左上的合适位置 */
* {
margin: 0px;
padding: 0px;
}
/* 画红旗 */
.flag {
width: 600px;
height: 400px;
background-color: red;
position: relative;
}
/* 设定星星的盒子大小 */
.star {
width: 200px;
height: 200px;
}
/* 设定3角形的通用属性 */
.star .a {
width: 0;
height: 0;
border-style: solid;
border-width: 0px 100px 70px 100px;
border-color: transparent transparent yellow transparent;
position: absolute;
}
/* 调整a1三角形的角度 */
.star .a1 {
transform: rotate(35deg);
}
/* 调整a2三角形的角度 */
.star .a2 {
transform: rotate(106deg);
}
/* 调整a3三角形的角度，最终形成5角星 */
.star .a3 {
transform: rotate(-35deg);
}
/* 对主星进行缩放、定位 */
.s1 {
transform: scale(0.5);
position: absolute;
top: 15px;
left: -10px;
}
/* 对s2-s5，4个小星星进行缩放、定位 */
.s2 {
transform: rotate(30deg) scale(0.2);
position: absolute;
top: -60px;
left: 80px;
}
.s3 {
transform: rotate(-18deg) scale(0.2);
position: absolute;
top: -18px;
left: 125px;
}
.s4 {
transform: scale(0.2);
position: absolute;
top: 40px;
left: 125px;
}
.s5 {
transform: rotate(30deg) scale(0.2);
position: absolute;
top: 75px;
left: 80px;
}
</style>
</head>
<body>
<div class="flag">
<div class="s1 star">
<p class="a1 a"></p>
<p class="a2 a"></p>
<p class="a3 a"></p>
</div>
<div class="s2 star">
<p class="a1 a"></p>
<p class="a2 a"></p>
<p class="a3 a"></p>
</div>
<div class="s3 star">
<p class="a1 a"></p>
<p class="a2 a"></p>
<p class="a3 a"></p>
</div>
<div class="s4 star">
<p class="a1 a"></p>
<p class="a2 a"></p>
<p class="a3 a"></p>
</div>
<div class="s5 star">
<p class="a1 a"></p>
<p class="a2 a"></p>
<p class="a3 a"></p>
</div>
</div>
</body>
</html>写回答
1回答
-
imooc_慕慕
2023-03-06
同学你好，代码可以实现效果，参考优化修改：
同时给同学提供另外一种布局思路，一个五角星可以由三个三角形拼接而来，这样就需要由三个元素来制作三个三角形，此时::before和::after伪元素可以代替两个真实元素来制作三角形，代码看起来更清晰；然后给所有的五角星调整位置和大小；参考代码如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>2-3</title> <style type="text/css"> /* 国旗背景 */ .vn-flag { width: 600px; height: 400px; background-color: rgb(218, 37, 29); position: relative; margin: 0 auto; } /* 绘制第一个三角形 */ .vn-flag .stars { position: absolute; left: 90px; top: 120px; border: 30px solid transparent; border-top: 20px solid yellow; } /* 绘制第二个三角形，并调整位置 */ .vn-flag .stars::before { content: ""; position: absolute; left: -44px; top: -30px; border: 30px solid transparent; border-top: 20px solid yellow; transform: rotate(70deg); } /* 绘制第三个三角形，并调整位置，与其它两个三角形正好拼接成一个五角星 */ .vn-flag .stars::after { content: ""; position: absolute; left: -18px; top: -30px; border: 30px solid transparent; border-top: 20px solid yellow; transform: rotate(292deg); } /* 调整第一个五角星的位置和大小 */ .vn-flag .one{ transform: scale(1.8); } /* 调整第二个五角星的位置和大小 */ .vn-flag .two{ left: 180px; top: 30px; transform: rotate(25deg) scale(0.6); } /* 调整第三个五角星的位置和大小 */ .vn-flag .three{ left: 220px; top: 80px; transform: rotate(45deg) scale(0.6); } /* 调整第四个五角星的位置和大小 */ .vn-flag .four{ left: 220px; top: 130px; transform: rotate(65deg) scale(0.6); } /* 调整第五个五角星的位置和大小 */ .vn-flag .five{ left: 180px; top: 180px; transform: rotate(85deg) scale(0.6); } </style> </head> <body> <div class="vn-flag"> <!-- 大五角星 --> <div class="stars one"></div> <!-- 四个小五角星 --> <div class="stars two"></div> <div class="stars three"></div> <div class="stars four"></div> <div class="stars five"></div> </div> </body> </html>同学可以参考注释理解理解。
祝学习愉快~
1
相似问题