请老师帮忙检查一下代码，谢谢
来源：2-13 编程练习
廖可爱bongbong
2021-05-14 10:44:42
相关代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
/*设置外面大盒子的样式*/
.flag{
width: 600px;
height: 400px;
background-color: red;
margin:0 auto;
position: relative;
}
/*大五角星*/
.flag .spot1{
position: absolute;
top: 80px;
left: 40px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
}
.flag .spot1::before{
content: "";
display: block;
position: absolute;
top: -46px;
left:-31px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(-73deg);
}
.flag .spot1::after{
content: "";
display: block;
position: absolute;
top: -46px;
left:-67px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(71deg);
}
/*右边第一个小五角星*/
.flag .spot2{
position: absolute;
top: 10px;
left: 120px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(25deg) scale(0.3);
}
.flag .spot2::before{
content: "";
display: block;
position: absolute;
top: -46px;
left:-31px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(-73deg);
}
.flag .spot2::after{
content: "";
display: block;
position: absolute;
top: -46px;
left:-67px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(71deg);
}
/*右边第二个小五角星*/
.flag .spot3{
position: absolute;
top: 46px;
left: 153px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(45deg) scale(0.3);
}
.flag .spot3::before{
content: "";
display: block;
position: absolute;
top: -46px;
left:-31px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(-73deg);
}
.flag .spot3::after{
content: "";
display: block;
position: absolute;
top: -46px;
left:-67px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(71deg);
}
/*右边第三个小五角星*/
.flag .spot4{
position: absolute;
top: 91px;
left: 153px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(65deg) scale(0.3);
}
.flag .spot4::before{
content: "";
display: block;
position: absolute;
top: -46px;
left:-31px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(-73deg);
}
.flag .spot4::after{
content: "";
display: block;
position: absolute;
top: -46px;
left:-67px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(71deg);
}
/*右边第四个小五角星*/
.flag .spot5{
position: absolute;
top: 127px;
left: 120px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(85deg) scale(0.3);
}
.flag .spot5::before{
content: "";
display: block;
position: absolute;
top: -46px;
left:-31px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(-73deg);
}
.flag .spot5::after{
content: "";
display: block;
position: absolute;
top: -46px;
left:-67px;
/*三角形*/
width: 0;
height: 0;
border-top: 35px solid yellow;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid transparent;
transform:rotate(71deg);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="flag">
<div class="spot1"></div>
<div class="spot2"></div>
<div class="spot3"></div>
<div class="spot4"></div>
<div class="spot5"></div>
</div>
</body>
</html>
写回答
1回答
-
同学你好，代码实现效果很好，不过css代码有点冗余，建议优化一下，将相同样式的代码合并书写，参考如下
祝学习愉快！
0
相似问题