<div class="flag ally-pride" role="img" aria-label="Ally Pride Flag. Six bars of equal height in black and white. The traditional gay pride flag is on top cropped in an A shape"></div>
.flag {
width: 80vmin;
aspect-ratio: 70 / 45;
}
.flag.ally-pride {
background: repeating-linear-gradient(black 0 16.66%, white 0 33.33%);
}
.flag.ally-pride::before {
content: "";
width: 100%;
height: 100%;
display: block;
background:
linear-gradient(red 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0);
clip-path: polygon(0 100%, 50% 0, 100% 100%, 66.66% 100%, 50% 66.66%, 33.33% 100%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.