老师这样可以吗？
来源：2-8 编程练习
丹叔
2020-12-30 22:51:25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转换（国旗）</title>
<style type="text/css">
.main{
width: 600px;
height: 400px;
margin: 0 auto;
margin-top: 80px;
background-color: red;
position: relative;
}
.d1{
width: 0;
height: 0;
border-style: solid;
border-width: 38px 60px 60px 60px;
border-color: yellow transparent transparent transparent;
position: absolute;
left: 60px;
top: 90px;
}
.d1::after{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 60px 38px 60px 60px;
border-color: transparent yellow transparent transparent;
position: absolute;
left: -74px;
top: -67px;
transform: rotate(341deg);
}
.d1::before{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 60px 60px 60px 38px;
border-color: transparent transparent transparent yellow;
position: absolute;
left: -23px;
top: -67px;
transform: rotate(21deg);
}
.d2{
width: 0;
height: 0;
border-style: solid;
border-width: 13px 21px 21px 21px;
border-color: yellow transparent transparent transparent;
position: absolute;
right: 309px;
top: 79px;
transform: rotate(-30deg);
}
.d2::after{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 21px 13px 21px 21px;
border-color: transparent yellow transparent transparent;
position: absolute;
right: -7px;
top: -25px;
transform: rotate(340deg);
}
.d2::before{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 21px 21px 21px 13px;
border-color: transparent transparent transparent yellow;
position: absolute;
right: -26px;
top: -24px;
transform: rotate(17deg);
}
.d3{
width: 0;
height: 0;
border-style: solid;
border-width: 13px 21px 21px 21px;
border-color: yellow transparent transparent transparent;
position: absolute;
right: 356px;
top: 33px;
transform: rotate(-50deg);
}
.d3::after{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 21px 13px 21px 21px;
border-color: transparent yellow transparent transparent;
position: absolute;
right: -7px;
top: -25px;
transform: rotate(340deg);
}
.d3::before{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 21px 21px 21px 13px;
border-color: transparent transparent transparent yellow;
position: absolute;
right: -26px;
top: -24px;
transform: rotate(17deg);
}
.d4{
width: 0;
height: 0;
border-style: solid;
border-width: 13px 21px 21px 21px;
border-color: yellow transparent transparent transparent;
position: absolute;
right: 316px;
top: 148px;
transform: rotate(360deg);
}
.d4::after{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 21px 13px 21px 21px;
border-color: transparent yellow transparent transparent;
position: absolute;
right: -7px;
top: -25px;
transform: rotate(340deg);
}
.d4::before{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 21px 21px 21px 13px;
border-color: transparent transparent transparent yellow;
position: absolute;
right: -26px;
top: -24px;
transform: rotate(17deg);
}
.d5{
width: 0;
height: 0;
border-style: solid;
border-width: 13px 21px 21px 21px;
border-color: yellow transparent transparent transparent;
position: absolute;
right: 363px;
top: 207px;
transform: rotate(380deg);
}
.d5::after{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 21px 13px 21px 21px;
border-color: transparent yellow transparent transparent;
position: absolute;
right: -7px;
top: -25px;
transform: rotate(340deg);
}
.d5::before{
display: block;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 21px 21px 21px 13px;
border-color: transparent transparent transparent yellow;
position: absolute;
right: -26px;
top: -24px;
transform: rotate(17deg);
}
</style>
</head>
<body>
<div class="main">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</div>
</body>
</html>
1回答
-
同学你好，这样写可以，但是可以优化一下。
五个五角星的形状是一样的，只是大小、位置不一样。所以五角星的形状，可以用统一设置（代码只需写一遍），然后再利用transform:scale();将其中四个五角星缩放成小五角星，利用rotate、left、top等值，设置四个小五角星位置。思路如下：
同学按照这个思路再优化一下自己的代码。祝学习愉快！
0
相似问题