老师麻烦帮检查一下代码的正确性和规范性
具体遇到的问题
老师我的思路大致是这样的:
1.制作三角形
2.调整三角形的位置,使其组合为五角星
3.调整每个五角星的位置,放置到红色背景上,组成红旗
我遇到的问题是这样的:
1.组成的五角星不匀称,目测每个尖角的大小好像不一致,
调整三角形组合的角度,又会对不齐。
2.调增小五角星的位置,全靠手动调整像素,感觉这样是不可行的,有没有更好的办法呢
3.调整五角星后,想给四个小五角星分别设置角度,可是不知道以哪里为中心,而且我在代码中尝试调整,可旋转的角度不起效果。
希望老师帮我修改一下,能够更贴合设计图的效果。
如果老师您有更好的思路,提示我一下。我绞尽脑汁写了这一串代码,效果出来后,感觉丑的很(无奈~)
粘贴全部相关代码,切记添加代码注释(请勿截图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style text="style/sheels">
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 400px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
perspective: 600px;
position: relative;
}
/* 上面的三角 */
.angle1 {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-top-color: #ffff00;
position: absolute;
margin-top: 100px;
}
/* 右侧三角 */
.angle2 {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-right-color: #ffff00;
position: absolute;
transform: rotateZ(-26deg) translateX(-50px);
margin-top: 60px;
}
/* 左侧三角 */
.angle3 {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-left-color: #ffff00;
position: absolute;
transform: rotateZ(26deg) translateX(50px);
margin-top: 60px;
}
.star1 {
position: relative;
transform: scale(0.45);
padding-top: 70px;
margin-left: -150px;
}
.star2 {
position: relative;
/* transform: rotateX(30deg) center center; */
transform: scale(0.18);
top: -55px;
margin-left: -130px;
}
.star3 {
position: relative;
/* transform: rotateX(30deg) center center; */
transform: scale(0.18);
top: 0px;
margin-left: -70px;
}
.star4 {
position: relative;
/* transform: rotateX(30deg) center center; */
transform: scale(0.18);
top: 60px;
margin-left: -70px;
}
.star5 {
position: relative;
/* transform: rotateX(30deg) center center; */
transform: scale(0.18);
top: 120px;
margin-left: -120px;
}
</style>
</head>
<body>
<div class="box">
<div class="star1">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
<div class="star2">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
<div class="star3">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
<div class="star4">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
<div class="star5">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
</div>
</body>
</html>
</html>
50
收起
正在回答
2回答
同学你好,老师也是慢慢调试做出来的。做这个没有技巧,只能手动调试哦!
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星