老师，请检查
来源：2-13 编程练习
慕芸芸
2022-12-13 11:25:21
<!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>国旗</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 600px;
height: 400px;
background: red;
margin: 40px auto;
}
.box .star{
position: absolute;
top: 100px;
left: 100px;
border: 30px solid transparent;
border-top: 20px solid yellow;
width: 0;
height: 0;
}
.box .star::before{
position: absolute;
top: -28px;
left: -44px;
content: '';
border: 30px solid transparent;
border-top: 20px solid yellow;
transform: rotate(73deg);
}
.box .star::after{
position: absolute;
top: -27px;
left: -19px;
content: '';
border: 30px solid transparent;
border-top: 20px solid yellow;
transform: rotate(297deg);
}
.box .one{
transform: scale(1.5);
}
.box .two{
transform: rotate(342deg) translateX(133px);
}
.box .three{
transform: rotate(26deg) translateX(133px);
}
.box .four{
transform: rotate(69deg) translateX(133px);
}
.box .five{
transform: rotate(108deg) translateX(133px);
}
</style>
</head>
<body>
<div class="box">
<div class="star one"></div>
<div class="star two"></div>
<div class="star three"></div>
<div class="star four"></div>
<div class="star five"></div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕慕子
2022-12-13
同学你好，整体思路是对的，不过可以适当调整下css样式，效果会更美观，示例：
<!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>国旗</title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 600px; height: 400px; background: red; margin: 40px auto; } .box .star { position: absolute; top: 100px; left: 100px; border: 30px solid transparent; border-top: 20px solid yellow; width: 0; height: 0; } .box .star::before { position: absolute; /* top: -28px; left: -44px; */ top: -29px; left: -42px; content: ""; border: 30px solid transparent; border-top: 20px solid yellow; /* transform: rotate(73deg); */ transform: rotate(68deg); } .box .star::after { position: absolute; /* top: -27px; left: -19px; */ top: -29px; left: -17px; content: ""; border: 30px solid transparent; border-top: 20px solid yellow; /* transform: rotate(297deg); */ transform: rotate(290deg); } .box .one { /* transform: scale(1.5); */ transform: scale(1.5) translate(10px, 14px); } .box .two { /* transform: rotate(342deg) translateX(133px); */ transform: rotate(326deg) translateX(122px) scale(0.5); } .box .three { /* transform: rotate(26deg) translateX(133px); */ transform: rotate(-7deg) translateX(143px) scale(0.5); } .box .four { /* transform: rotate(69deg) translateX(133px); */ transform: rotate(19deg) translateX(146px) scale(0.5); } .box .five { /* transform: rotate(108deg) translateX(133px); */ transform: rotate(48deg) translateX(133px) scale(0.5); } </style> </head> <body> <div class="box"> <div class="star one"></div> <div class="star two"></div> <div class="star three"></div> <div class="star four"></div> <div class="star five"></div> </div> </body> </html>结合上面的代码测试下即可，实际开发中会有具体的参数参考设置样式的。
祝学习愉快~
0
相似问题