使用 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>