SOURCE

const starContainer = document.querySelector('.star-container');

const fragment = new DocumentFragment();
for (let i = 0; i < 50; i++) {
    const star = document.createElement('div');
    star.className = 'star';
    fragment.appendChild(star);
}

starContainer.appendChild(fragment);

<div class="container">
    <div class="star-container"></div>
</div>

.container {
    width: 380px;
    height: 200px;
    background-image: linear-gradient(#B22234 50%, #FFFFFF 0);
    background-size: 100% calc(200% / 13);
}

.star-container {
    width: 40%;
    height: 53.7%;
    background-color: #3C3B6E;
    /* padding: 1.42% 1.67%; */
    position: relative;
}

.star {
    width: 8.11%;
    height: 11.44%;
    position: absolute;
    background-color: #FFFFFF;
    clip-path: polygon(50% 0, 61.23% 34.55%, 97.55% 34.55%, 68.16% 55.9%, 79.39% 90.45%, 50% 69.1%, 20.61% 90.45%, 31.84% 55.9%, 2.45% 34.55%, 38.77% 34.55%);
}

.star:nth-child(-n+6) {
    top: 4.1%;
}
.star:nth-child(-n+11):nth-child(n+7) {
    top: 14.1%;
}
.star:nth-child(-n+17):nth-child(n+12) {
    top: 24.1%;
}
.star:nth-child(-n+22):nth-child(n+18) {
    top: 34.1%;
}
.star:nth-child(-n+28):nth-child(n+23) {
    top: 44.1%;
}
.star:nth-child(-n+33):nth-child(n+29) {
    top: 54.1%;
}
.star:nth-child(-n+39):nth-child(n+34) {
    top: 64.1%;
}
.star:nth-child(-n+44):nth-child(n+40) {
    top: 74.1%;
}
.star:nth-child(-n+50):nth-child(n+45) {
    top: 84.1%;
}

.star:nth-child(11n+1) {
    left: 4.28%;
}
.star:nth-child(11n+2) {
    left: 20.93%;
}
.star:nth-child(11n+3) {
    left: 37.59%;
}
.star:nth-child(11n+4) {
    left: 54.25%;
}
.star:nth-child(11n+5) {
    left: 70.91%;
}
.star:nth-child(11n+6) {
    left: 87.57%;
}
.star:nth-child(11n+7) {
    left: 12.61%;
}
.star:nth-child(11n+8) {
    left: 29.26%;
}
.star:nth-child(11n+9) {
    left: 45.92%;
}
.star:nth-child(11n+10) {
    left: 62.58%;
}
.star:nth-child(11n) {
    left: 79.24%;
}