老师，帮忙看一下我的思路是否正确，谢谢！

先画一个三角，再用伪元素画两个，旋转组合成一个五角星，其他的如法炮制，然后再打开检查，调节距离和旋转角度。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.main{
width: 300px;
height: 200px;
background-color: #f00;
padding: 20px;
}
.star{
width: 0px;
height: 0px;
border-top: 10px solid yellow;
border-left: 17.32px solid transparent;
border-right: 17.32px solid transparent;
margin-top: 20px;
position: relative;
}
.star::before{
content: "";
display: block;
width: 0px;
height: 0px;
border-top: 10px solid yellow;
border-left: 17.32px solid transparent;
border-right: 17.32px solid transparent;
position: absolute;
top: -10px;
left: -17.32px;
transform: rotate(74deg);
}
.star::after{
content: "";
display: block;
width: 0px;
height: 0px;
border-top: 10px solid yellow;
border-left: 17.32px solid transparent;
border-right: 17.32px solid transparent;
position: absolute;
top: -10px;
left: -17.32px;
transform: rotate(147deg);
}
.center{
position: absolute;
transform: scale(1.8, 1.8);
top: 55px;
left: 40px;
}
.one,.two,.three,.four{
position: absolute;
transform: scale(0.7, 0.7) rotate(-45deg);
}
.one{
top: 10px;
left: 80px;
}
.two{
top: 40px;
left: 110px;
}
.three{
top: 80px;
left: 110px;
transform: scale(0.7, 0.7) rotate(-62deg);
}
.four{
top: 110px;
left: 80px;
}
</style>
</head>
<body>
<div class="main">
<div class="star center"></div>
<div class="star one"></div>
<div class="star two"></div>
<div class="star three"></div>
<div class="star four"></div>
</div>
</body>
</html>

慕九州4495990 2019-06-27

源自：CSS3转换 2-8 编程练习