老师能帮我检查一下吗
来源：2-8 编程练习
明亦星辰
2019-10-17 12:29:15
<!DOCTYPE html>
<html>
<head>
<title>五星红旗</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
border: 0;
}
.flag{
width: 600px;
height: 400px;
position: relative;
background: red;
}
div.star-1{
position: relative;
width: 0;
height: 0;
top: 80px;
left: 40px;
border-top: 0px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 35px solid yellow;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
div.star-1::before,div.star-2::before,div.star-3::before,div.star-4::before,div.star-5::before{
content: "";
position: absolute;
top: 0px;
left: -52px;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 35px solid yellow;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
}
div.star-1::after,div.star-2::after,div.star-3::after,div.star-4::after,div.star-5::after{
content: "";
position: absolute;
top: 0px;
left: -50px;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 35px solid yellow;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
div.star-2{
position: relative;
width: 0;
height: 0;
top: 80px;
left: 0px;
border-top: 0px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 35px solid yellow;
-webkit-transform: rotate(50deg) scale(0.3) translate(10px,-480px);
-moz-transform: rotate(50deg) scale(0.3) translate(10px,-480px);
-ms-transform: rotate(50deg) scale(0.3) translate(10px,-480px);
-o-transform: rotate(50deg) scale(0.3) translate(10px,-480px);
transform: rotate(50deg) scale(0.3) translate(10px,-480px);
}
div.star-3{
position: relative;
width: 0;
height: 0;
top: 80px;
left: 100px;
border-top: 0px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 35px solid yellow;
-webkit-transform: rotate(-50deg) scale(0.3) translate(300px,-90px);
-moz-transform: rotate(-50deg) scale(0.3) translate(300px,-90px);
-ms-transform: rotate(-50deg) scale(0.3) translate(300px,-90px);
-o-transform: rotate(-50deg) scale(0.3) translate(300px,-90px);
transform: rotate(-50deg) scale(0.3) translate(300px,-90px);
}
div.star-4{
position: relative;
width: 0;
height: 0;
top: 80px;
left: 100px;
border-top: 0px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 35px solid yellow;
-webkit-transform: rotate(-38deg) scale(0.3) translate(250px,-120px);
-moz-transform: rotate(-38deg) scale(0.3) translate(250px,-120px);
-ms-transform: rotate(-38deg) scale(0.3) translate(250px,-120px);
-o-transform: rotate(-38deg) scale(0.3) translate(250px,-120px);
transform: rotate(-38deg) scale(0.3) translate(250px,-120px);
}
div.star-5{
position: relative;
width: 0;
height: 0;
top: 100px;
left:0px;
border-top: 0px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 35px solid yellow;
-webkit-transform: rotate(50deg) scale(0.3) translate(0px,-480px);
-moz-transform: rotate(50deg) scale(0.3) translate(0px,-480px);
-ms-transform: rotate(50deg) scale(0.3) translate(0px,-480px);
-o-transform: rotate(50deg) scale(0.3) translate(0px,-480px);
transform: rotate(50deg) scale(0.3) translate(0px,-480px);
}
</style>
</head>
<body>
<div class="flag">
<div class="star-1"></div>
<div class="star-2"></div>
<div class="star-3"></div>
<div class="star-4"></div>
<div class="star-5"></div>
</div>
</body>
</html>
1回答
-
同学你好， 整体效果实现的不错， 不过有一个细节需要注意一下哦， 放大检查， 如下图所以， 五角星的实现上有一个误差
建议优化：可以适当调整一下左边框的值，让代码实现效果更完美哦
如果帮助到了你， 欢迎采纳！
祝学习愉快～～～～
1
相似问题