CSS 实现五星红旗

<style>
    .flag {
        position: relative;
        width: 90vw;
        height: 60vw;
        background-color: red;
    }
    .star,
    .star::before,
    .star::after {
        position: absolute;
        top: 12.218847vw;
        left: 6.44049135vw;
        border: 8.55950864vw solid transparent;
        border-top-width: 6.21884705vw;
        border-bottom-width: 0;
        border-top-color: yellow;
    }
    .star::before,
    .star::after {
    content: "";
    top: -6.21884705vw;
    left: -8.55950864vw;
    transform: rotate(-72deg);
    transform-origin: 50% 44.721359%;
    }
    .star::after {
    transform: rotate(72deg);
    }
    .small1 {
    transform: translate(15vw, -9vw) scale(0.33) rotate(-35deg);
    }
    .small2 {
    transform: translate(21vw, -3vw) scale(0.33) rotate(-12deg);
    }
    .small3 {
    transform: translate(21vw, 6vw) scale(0.33) rotate(13deg);
    }
    .small4 {
    transform: translate(15vw, 12vw) scale(0.33) rotate(36deg);
    }
</style>

<doby>
    <div class="flag">
        <div class="star"></div>
        <div class="star small1"></div>
        <div class="star small2"></div>
        <div class="star small3"></div>
        <div class="star small4"></div>
    </div>
</body>