老师，这个应该怎么实现，我没有思路。

没有思路

临溪倚山靠 2021-10-14

源自：2D与3D转换 2-13 编程练习

收起

1回答

好帮手慕然然 2021-10-14 10:27:52

同学你好，可以参考以下思路来实现：

首先创建一个矩形div作为国旗背景，然后再创建五个div作为五个五角星，html代码结构如下：

然后绘制国旗背景样式，css代码如下

再然后开始绘制五角星：五个五角星的绘制方式都是一样的，所以可以统一绘制，最后只需要调整每个五角星的大小和位置即可。五角星绘制思路如下：

可以将三个三角形拼接得到一个五角星，因为html中一个五角星只定义了一个div元素，一个div元素只绘制一个三角形，所以剩余两个三角形可以通过::before和::after伪元素实现，代码如下

最后，调整每个五角星的位置和大小，如图

祝学习愉快！

收起回答

提问者临溪倚山靠 #1

请老师检查，其中的两个三角形为什么要用::before和::after伪元素来实现？
<style>
.flag {
width: 600px;
height: 400px;
background-color: red ;
margin: 20px auto;
position: relative;
}
.flag .star{
position: absolute;
width: 0;
height: 0;
border: 30px solid transparent;
border-top: 20px solid yellow;
top: 90px;
left: 60px;
}
.flag .star::before {
position: absolute;
width: 0;
height: 0;
border: 30px solid transparent;
border-top: 20px solid yellow;
top: -30px;
left: -18px;
content:'' ;
transform: rotate(-72deg);
}
.flag .star::after {
position: absolute;
width: 0;
height: 0;
border: 30px solid transparent;
border-top: 20px solid yellow;
top: -29px;
left: -45px;
content:'' ;
transform: rotate(69deg);
}
.flag .one {
transform: scale(1.8);
}
.flag .two {
transform: scale(0.6) rotate(20deg);
left:134px ;
top:20px ;
}
.flag .three {
transform: scale(0.6) rotate(-23deg);
left:170px ;
top:64px ;
}
.flag .four {
transform: scale(0.6) rotate(-1deg);
left:170px ;
top:120px ;
}
.flag .five {
transform: scale(0.6) rotate(20deg);
left:134px ;
top:157px ;
}
</style>
</head>
<body>
<div class="flag">
<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>

2021-10-15 10:07:25
好帮手慕然然回复提问者临溪倚山靠 #2

同学你好，代码实现没问题，很棒！因为使用::before和::after伪元素来实现其它两个三角形，代码看起来比较简洁，实现起来也比较容易，不用再另外多定义两个元素来实现三角形，使得html结构看起来更清晰，即一个div+::before+::after伪元素实现一个五角星。祝学习愉快！

2021-10-15 11:08:44