console
<div class="flag-container">
<div class="star big">
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
</div>
<div class="star small">
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
</div>
<div class="star small">
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
</div>
<div class="star small">
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
</div>
<div class="star small">
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
</div>
</div>
html, body {
margin: 0;
padding: 0;
}
.flag-container {
width: 450px;
height: 300px;
background-color: #de2910;
}
.tri {
border-top: 0;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-bottom: 1.5388em solid #ffde00;
display: block;
height: 1.5388em;
width: 1em;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
margin-top: -0.7692em;
margin-left: -0.5em;
}
.star {
position: absolute;
overflow: hidden;
height: 2.4em;
width: 2.4em;
}
.star.big {
font-size: 38px;
left: 36px;
top: 36px;
}
.star.small {
font-size: 12px;
}
.small:nth-child(2) {
left: 140px;
top: 20px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.small:nth-child(3) {
left: 168px;
top: 50px;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.small:nth-child(4) {
left: 168px;
top: 88px;
}
.small:nth-child(5) {
left: 140px;
top: 118px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.star .tri:nth-child(1) {
-webkit-transform: translateY(-0.5em);
transform: translateY(-0.5em);
}
.star .tri:nth-child(2) {
-webkit-transform: rotate(72deg) translateY(-0.5em);
transform: rotate(72deg) translateY(-0.5em);
}
.star .tri:nth-child(3) {
-webkit-transform: rotate(144deg) translateY(-0.5em);
transform: rotate(144deg) translateY(-0.5em);
}
.star .tri:nth-child(4) {
-webkit-transform: rotate(216deg) translateY(-0.5em);
transform: rotate(216deg) translateY(-0.5em);
}
.star .tri:nth-child(5) {
-webkit-transform: rotate(-72deg) translateY(-0.5em);
transform: rotate(-72deg) translateY(-0.5em);
}