半个，还差一点，但是我懒
用边框写的，绝对定位，然后写好一个，其他的写旋转缩放去网页调整到合适位置
<style>
{
margin: 0;
padding: 0;
}
section {
width: 600px;
height: 400px;
background-color: red;
margin: 0 auto;
position: relative;
margin: 30px auto;
}
div{
width: 0;
height: 0;
border-top: yellow solid 30px;
border-left: transparent solid 50px;
border-right: transparent solid 50px;
position: absolute;
margin-top: 40px;
margin-left: 40px;
}
div::before {
content: '';
width: 0;
height: 0;
border-top: yellow solid 30px;
border-left: transparent solid 50px;
border-right: transparent solid 50px;
transform: rotate(72.5deg);
display: block;
margin-left: -49px;
margin-top: -28px;
}
div::after {
content: '';
width: 0;
height: 0;
border-top: yellow solid 30px;
border-left: transparent solid 50px;
border-right: transparent solid 50px;
transform: rotate(-72.5deg);
display: block;
margin-left: -50px;
margin-top: -28px;
}
.x2 {
margin-top: 13px;
margin-left: 127px;
transform: rotate(22deg) scale(0.25);
}
</style>
//html
<body>
<section class="hong">
<div class="x1"></div>
<div class="x2"></div>
<div class="x3"></div>
<div class="x4"></div>
<div class="x5"></div>
</section>
</body>
</html>
