<a href="https://alvaromontoro.com/blog/68009/lgbtq-flags-coded-in-css" target="_blank">Learn more<br/>about these flags</a>

<article>
  <h1>LGBTQ+ Flags Coded in CSS</h1>
  <section>
    <h2>Gilbert Baker Pride Flag</h2>
    <div class="flag gilbert-baker" role="img" aria-label="Gilbert Baker Pride Flag. Eight vertical bars of equal size: hot pink, red, orange, yellow, green, turquoise, blue, and indigo."></div>
  </section>
  <section>
    <h2>1978 Pride Flag</h2>
    <div class="flag pride-1978" role="img" aria-label="1978 Pride Flag. Seven vertical bars of equal size: red, orange, yellow, green, turquoise, blue, and indigo"></div>
  </section>
  <section>
    <h2>Traditional Gay Pride Flag</h2>
    <div class="flag traditional" role="img" aria-label="Traditional Gay Pride Flag. Six vertical bars of equal size: red, orange, yellow, green, blue, and indigo"></div>
  </section>
  <section>
    <h2>Philadelphia Pride Flag</h2>
    <div class="flag philadelphia" role="img" aria-label="Philadelphia Pride Flag. Eight vertical bars of equal size: black, brown, red, orange, yellow, green, blue, and indigo."></div>
  </section>
  <section>
    <h2>Progress Pride Flag</h2>
    <div class="flag progress" role="img" aria-label="Progress Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. On the left side, it has triangles of color: white, pink, light blue, brown, and black."></div>
  </section>
  <section>
    <h2>Intersex-Inclusive Pride Flag</h2>
    <div class="flag intersex-inclusive" role="img" aria-label="Intersex-Inclusive Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. On the left side, it has triangles of color: yellow (with a violet ring inside), white, pink, light blue, brown, and black."></div>
  </section>
  <section>
    <h2>New Pride Flag</h2>
    <div class="flag new-pride" role="img" aria-label="New Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. And diagonally from top-left to bottom-right (until half) bars of white, pink, light blue, brown, and black."></div>
  </section>
  <section>
    <h2>Social Justice Pride Flag</h2>
    <div class="flag social-justice" role="img" aria-label="New Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. And triangles on the right side: red, blue, and black."></div>
  </section>
  
  <section>
    <h2>Ally Pride Flag</h2>
    <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>
  </section>
  <section>
    <h2>Pink Triangle Flag</h2>
    <div class="flag pink-triangle" role="img" aria-label="Pink Triangle Flag. An inverted pink triangle over a black background."></div>
  </section>
  <section>
    <h2>Intersex Pride Flag</h2>
    <div class="flag intersex" role="img" aria-label="Intersex Pride Flag. A yellow flag with a purple ring in the center"></div>
  </section>
  <section>
    <h2>Labrys Lesbian Pride Flag</h2>
    <div class="flag labrys" role="img" aria-label="Labrys Lesbian Pride Flag. A double-side white axe, inside a black inverted triangle over a purple background."></div>
  </section>
  <section>
    <h2>Pride of Africa flag</h2>
    <div class="flag pride-of-africa" role="img" aria-label="Pride of Africa Flag. Colorful cubist design divided in 6 columns and 2 rows with shapes that forms the letters 'Pride of africa'"></div>
  </section>
  <section>
    <h2>Drag Pride Flag</h2>
    <div class="flag drag" role="img" aria-label="drag Pride Flag. Three vertical bars of equal size purple, white, and blue. A pink crown with stars in the center."></div>
  </section>
  <section>
    <h2>Puppy Pride Flag</h2>
    <div class="flag puppy" role="img" aria-label="Puppy Pride Flag. Diagonal black and blue lines with a white line in the middle. There is a red bone at the center of the flag."></div>
  </section>
  <section>
    <h2>Leather Pride Flag</h2>
    <div class="flag leather" role="img" aria-label="Leather Pride Flag. Nine vertical bars of equal size black and blue intercalated. The middle one os white, and it has a heart at the top left."></div>
  </section>
  <section>
    <h2>Rubber Pride Flag</h2>
    <div class="flag rubber" role="img" aria-label="Rubber Pride Flag. Lines of black, red, and yellow, forming some angles."></div>
  </section>
  <section>
    <h2>Lesbian Pride Flag</h2>
    <div class="flag lesbian" role="img" aria-label="Lesbian Pride Flag. Seven vertical bars of equal size: three shades of red/orange (to lighter), white, and three shades of pink (to darker)"></div>
  </section>
  <section>
    <h2>Bear Brotherhood Flag</h2>
    <div class="flag bear-brotherhood" role="img" aria-label="Bear Brotherhood Pride Flag. Seven vertical bars of equal size: four shades of brown (to lighter), white, gray, and black."></div>
  </section>
  <section>
    <h2>Gay Male Pride Flag</h2>
    <div class="flag trans-inclusive" role="img" aria-label="trans-inclusive gay men's Pride Flag. Seven vertical bars of equal size: three shades of green (to lighter), white, and three shades of blue (to darker)."></div>
  </section>
  <section>
    <h2>Agender Pride Flag</h2>
    <div class="flag agender" role="img" aria-label="Agender Pride Flag. Seven vertical bars of equal size: black, gray, white, light green, white, gray, black."></div>
  </section>
  <section>
    <h2>Bigender Pride Flag</h2>
    <div class="flag bigender" role="img" aria-label="Bigender Pride Flag. Seven vertical bars of equal size: dark pink, light pink, purple, white, purple, light blue, blue."></div>
  </section>
  <section>
    <h2>Metagender Pride Flag</h2>
    <div class="flag metagender" role="img" aria-label="Metagender Pride Flag. Seven vertical bars of equal size: black, lime, yellow, white, yellow, lime, and black."></div>
  </section>
  <section>
    <h2>Transgender Pride Flag</h2>
    <div class="flag transgender" role="img" aria-label="Transgender Pride Flag. Five bars of equal height: light blue, pink, white, pink, light blue."></div>
  </section>
  <section>
    <h2>Genderfluid Pride Flag</h2>
    <div class="flag genderfluid" role="img" aria-label="Genderfluid Pride Flag. Five bars of equal height: pink, white, fuchsia, black, and blue."></div>
  </section>
  <section>
    <h2>Aromantic Pride Flag</h2>
    <div class="flag aromantic" role="img" aria-label="Aromantic Pride Flag. Five bars of equal height: dark green, light green, white, gray, black."></div>
  </section>
  <section>
    <h2>Abrosexual Pride Flag</h2>
    <div class="flag abrosexual" role="img" aria-label="Aromantic Pride Flag. Five bars of equal height: green, light green, white, light pink, hot pink."></div>
  </section>
  <section>
    <h2>Graysexual Pride Flag</h2>
    <div class="flag graysexual" role="img" aria-label="Graysexual Pride Flag. Five bars of equal height: purple, gray, white, gray, and purple."></div>
  </section>
  <section>
    <h2>Hijra Pride Flag</h2>
    <div class="flag hijra" role="img" aria-label="Hijra Pride Flag. Five bars (first and last double the size as the others): light blue, white, dark red, white, light pink."></div>
  </section>
  <section>
    <h2>Bisexual Pride Flag</h2>
    <div class="flag bisexual" role="img" aria-label="Bisexual Pride Flag. Three horizontal lines Fuchsia, Pink, and Blue. The middle one half the size of the others."></div>
  </section>
  <section>
    <h2>Demisexual Pride Flag</h2>
    <div class="flag demisexual" role="img" aria-label="Demisexual Pride Flag. Three horizontal lines white, purple (thin line), and light gray. And a black triangle on the left side."></div>
  </section>
  <section>
    <h2>Demiromantic Pride Flag</h2>
    <div class="flag demiromantic" role="img" aria-label="Demiromantic Pride Flag. Three horizontal lines white, green (thin line), and light gray. And a black triangle on the left side."></div>
  </section>
  <section>
    <h2>Nonbinary Pride Flag</h2>
    <div class="flag nonbinary" role="img" aria-label="Nonbinary Pride Flag. Four horizontal lines of the same size yellow, white, purple, and black."></div>
  </section>
  <section>
    <h2>Asexual Pride Flag</h2>
    <div class="flag asexual" role="img" aria-label="Asexual Pride Flag. Four horizontal lines of the same size black, gray, white, and violet."></div>
  </section>
  <section>
    <h2>Pansexual Pride Flag</h2>
    <div class="flag pansexual" role="img" aria-label="Pansexual Pride Flag. Three horizontal lines of the same size pink, gold, and light blue."></div>
  </section>
  <section>
    <h2>Genderqueer Pride Flag</h2>
    <div class="flag genderqueer" role="img" aria-label="Genderqueer Pride Flag. Three bars of equal height: light violet, white, and green."></div>
  </section>
  <section>
    <h2>Polysexual Pride Flag</h2>
    <div class="flag polysexual" role="img" aria-label="Polysexual Pride Flag. Three bars of equal height: magenta, light green, and light blue."></div>
  </section>
  <section>
    <h2>Polyamory Flag (no scale)</h2>
    <div class="flag polyamory" role="img" aria-label="Polyamory Pride Flag. Three horizontal lines of the same size blue, red, and black. The symbol of pi at the center in yellow."></div>
  </section>
  <section>
    <h2>Twink Pride Flag</h2>
    <div class="flag twink" role="img" aria-label="Twink Pride Flag. Three horizontal lines of the same size pink, white, and yellow. In the center of the flag, two interlaced male symbols."></div>
  </section>
  <section>
    <h2>Androgyne Flag</h2>
    <div class="flag androgyne" role="img" aria-label="Androgyne Pride Flag. Three vertical lines of the same size: pink, purple, and blue."></div>
  </section>
</article>

<hr/>

<article>
  <h1>Icon versions</h1>
  <section>
    <div class="flag icon pink-triangle"></div>
    <div class="flag icon gilbert-baker"></div>
    <div class="flag icon pride-1978"></div>
    <div class="flag icon traditional"></div>
    <div class="flag icon philadelphia"></div>
    <div class="flag icon progress"></div>
    <div class="flag icon intersex-inclusive"></div>
    <div class="flag icon new-pride"></div>
    <div class="flag icon social-justice"></div>
    <div class="flag icon ally-pride"></div>
    <div class="flag icon intersex"></div>
    <div class="flag icon labrys"></div>
    <div class="flag icon pride-of-africa"></div>
    <div class="flag icon drag"></div>
    <div class="flag icon puppy"></div>
    <div class="flag icon leather"></div>
    <div class="flag icon rubber"></div>
    <div class="flag icon lesbian"></div>
    <div class="flag icon bear-brotherhood"></div>
    <div class="flag icon trans-inclusive"></div>
    <div class="flag icon agender"></div>
    <div class="flag icon bigender"></div>
    <div class="flag icon metagender"></div>
    <div class="flag icon transgender"></div>
    <div class="flag icon genderfluid"></div>
    <div class="flag icon aromantic"></div>
    <div class="flag icon abrosexual"></div>
    <div class="flag icon graysexual"></div>
    <div class="flag icon hijra"></div>
    <div class="flag icon bisexual"></div>
    <div class="flag icon demisexual"></div>
    <div class="flag icon demiromantic"></div>
    <div class="flag icon nonbinary"></div>
    <div class="flag icon asexual"></div>
    <div class="flag icon pansexual"></div>
    <div class="flag icon genderqueer"></div>
    <div class="flag icon polysexual"></div>
    <div class="flag icon twink"></div>
    <div class="flag icon androgyne"></div>
  </section>
</article>

/* Flags */
.flag {
  display: inline-block;
  width: 300px;
  aspect-ratio: 14 / 9;
}

.flag.icon {
  width: 3em;
}

.flag.icon.large {
  width: 4em;
}

.flag.pink-triangle {
  background:
    conic-gradient(from 331deg at 50% 100%, #f7a 58deg, #0000 0) 50% 50% / 55% 73% no-repeat,
    black;
}

.flag.gilbert-baker {
  background:
    linear-gradient(hotpink 12.5%, red 0 25%, orange 0 37.5%, yellow 0 50%, green 0 62.5%, darkturquoise 0 75%, blue 0 87.5%, indigo 0);
}

.flag.pride-1978 {
  background:
    linear-gradient(red 0 14.28%, orange 0 28.57%, yellow 0 42.85%, green 0 57.14%, darkturquoise 0 71.42%, blue 0 85.71%, indigo 0);
}


.flag.traditional {
   background:
    linear-gradient(red 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0)
}

.flag.philadelphia {
  background:
    linear-gradient(black 12.5%, saddlebrown 0 25%, red 0 37.5%, orange 0 50%, yellow 0 62.5%, green 0 75%, blue 0 87.5%, indigo 0);
}

.flag.progress {
  background:
    conic-gradient(at 14% 50%, #0000 221.25deg, white 222deg 318deg, #0000 318.25deg),
    conic-gradient(at 23% 50%, #0000 221.25deg, #ffa6b9 222deg 318deg, #0000 318.25deg),
    conic-gradient(at 32% 50%, #0000 221.25deg, #00d2ff 222deg 318deg, #0000 318.25deg),
    conic-gradient(at 41% 50%, #0000 221.25deg, #753000 222deg 318deg, #0000 318.25deg),
    conic-gradient(at 50% 50%, #0000 221.25deg, black 222deg 318deg, #0000 318.25deg),
    linear-gradient(red 0 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0);
}

.flag.intersex-inclusive {
  background:
    radial-gradient(circle at 9.75% 50%, #0000 6.66%, darkviolet 6.7% 8.33%, #0000 8.4%),
    conic-gradient(at 26.66% 50%, #0000 222.75deg, gold 0 317.25deg, #0000 0),
    conic-gradient(at 33% 50%, #0000 222.75deg, white 0 317.25deg, #0000 0),
    conic-gradient(at 39% 50%, #0000 222.75deg, #ffa6b9 0 317.25deg, #0000 0),
    conic-gradient(at 45.66% 50%, #0000 222.75deg, #00d2ff 0 317.25deg, #0000 0),
    conic-gradient(at 52% 50%, #0000 222.75deg, #753000 0 317.25deg, #0000 0),
    conic-gradient(at 58.33% 50%, #0000 222.75deg, #000 0 317.25deg, #0000 0),
    linear-gradient(red 0 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0);
}

.flag.new-pride {
  background:
    linear-gradient(to bottom right, white 10%, #ffa6b9 0 20%, #00d2ff 0 30%, #753000 0 40%, black 0 50%, #0000 0),
    linear-gradient(red 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0)
}

.flag.social-justice {
  background:
    conic-gradient(at 12.5% 50%, #0000 228deg, #f9000c 0 312deg, #0000 0),
    conic-gradient(at 24% 50%, #0000 228deg, #1241a1 0 312deg, #0000 0),
    conic-gradient(at 35.5% 50%, #0000 228deg, black 0 312deg, #0000 0),
    linear-gradient(red 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0)
}

.flag.transgender {
   background:
    linear-gradient(#00d2ff 20%, #ffa6b9 0 40%, white 0 60%, #ffa6b9 0 80%, #00d2ff 0)
}

.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%);
}

.flag.intersex {
  background: radial-gradient(circle, gold 24.5%, darkviolet 25% 34%, gold 34.5%)
}

.flag.bisexual {
   background: linear-gradient(#f07 40%, #c49 0 60%, #03a 0);
}

.flag.demisexual {
   background: 
     conic-gradient(at 35.5% 50%, #0000 228deg, black 0 312deg, #0000 0),
     linear-gradient(white 42%, purple 0 58%, lightgray 0);
}

.flag.demiromantic {
   background: 
     conic-gradient(at 35.5% 50%, #0000 228deg, black 0 312deg, #0000 0),
     linear-gradient(white 42%, #092 0 58%, lightgray 0);
}


.flag.pansexual {
   background: linear-gradient(#f09 33.33%, gold 0 66.66%, deepskyblue 0);
}

.flag.asexual {
   background: linear-gradient(black 25%, darkgray 0 50%, white 0 75%, #a50089 0);
}

.flag.nonbinary {
   background: linear-gradient(yellow 25%, white 0 50%, mediumorchid 0 75%, black 0);
}

.flag.labrys {
  position: relative;
  background: 
     conic-gradient(from 330deg at 50% 100%, black 60deg, #0000 0) 50% 50% / 83% 83% no-repeat,
    darkmagenta;
}

.flag.labrys::before {
  content: "";
  position: absolute;
  width: 35%;
  top: 1.66%;
  left: 50%;
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  transform: translateX(-50%);
  -webkit-mask:
    radial-gradient(130% 215% at 50% 0%, #0000 35%, #000 0) 50% 0 / 100% 51% no-repeat,
    radial-gradient(130% 230% at 50% 100%, #0000 35%, #000 0) 50% 100% / 100% 51% no-repeat;
  mask:
    radial-gradient(130% 215% at 50% 0%, #0000 35%, #000 0) 50% 0 / 100% 51% no-repeat,
    radial-gradient(130% 230% at 50% 100%, #0000 35%, #000 0) 50% 100% / 100% 51% no-repeat;
}

.flag.labrys::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 4%;
  height: 60%;
  background: white;
  border-radius: 100% / 5%;
  box-shadow: 0 0 0 1px;
}

.flag.polyamory {
  position: relative;
  background: 
/*     radial-gradient(farthest-side at 100% 100%, #0000 60%, yellow 0 99.9%, #0000 0) 43.5% 42% / 4% 7.5% no-repeat,
    linear-gradient(yellow 0 0) 51.5% 40% / 12% 3% no-repeat, */
    linear-gradient(blue 33.33%, red 0 66.66%, black 0);
}

.flag.polyamory::before {
  content: "π";
  color: yellow;
  position: absolute;
  font-family: 'Times New Roman', 'Times', serif;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  font-size: 90px;
  font-weight: 100;
}

.flag.twink {
  position: relative;
  background: 
    linear-gradient(-45deg, #0000 43%, #000 0 57%, #0000 0) 52.5% 39.25% / 5% 5% no-repeat,
    linear-gradient(-45deg, #0000 43%, #000 0 57%, #0000 0) 58.5% 45.25% / 5% 5% no-repeat,
    
    linear-gradient(#000 0 0) 52.75% 37.5% / 3.5% 1.5% no-repeat,
    linear-gradient(#000 0 0) 58.75% 43.5% / 3.5% 1.5% no-repeat,
    
    linear-gradient(#000 0 0) 54.1% 39% / 1% 5% no-repeat,
    linear-gradient(#000 0 0) 59.75% 45.1% / 1% 5% no-repeat,
    
    radial-gradient(circle at 47% 47%, #0000 7%, #000 0 8.5%, #0000 0),
    radial-gradient(circle at 53% 53%, #0000 7%, #000 0 8.5%, #0000 0),
    linear-gradient(#faf 33.33%, white 0 66.66%, #ff6 0);
}


.flag.genderfluid {
   background:
    linear-gradient(hotpink 20%, white 0 40%, #e0e 0 60%, black 0 80%, blue 0)
}

.flag.aromantic {
   background:
    linear-gradient(#0a2 20%, #7d6 0 40%, white 0 60%, darkgray 0 80%, black 0)
}

.flag.abrosexual {
   background:
    linear-gradient(#5c8 20%, #a7e6c8 0 40%, white 0 60%, #f390b7 0 80%, #eb306d 0)
}

.flag.graysexual {
   background:
     linear-gradient(darkmagenta 20%, darkgray 0 40%, white 0 60%, darkgray 0 80%, darkmagenta 0)
}


.flag.hijra {
   background:
    linear-gradient(#ffc9e7 35%, white 0 45%, #d30000 0 55%, white 0 65%, #afe1fe 0)
}


.flag.genderqueer {
   background:
    linear-gradient(orchid 33.33%, white 0 66.66%, green 0)
}

.flag.polysexual {
   background:
    linear-gradient(#f0c 33.33%, #0d5 0 66.66%, #09f 0)
}

.flag.lesbian {
  background:
    linear-gradient(red 0 14.28%, #ff7000 0 28.57%, #f93 0 42.85%, white 0 57.14%, #f5a 0 71.42%, #f49 0 85.71%, #e06 0);
}

.flag.bear-brotherhood {
  background:
    linear-gradient(#730 0 14.28%, #f50 0 28.57%, #fd3 0 42.85%, #ffe7b1 0 57.14%, white 0 71.42%, #555 0 85.71%, black 0);
}

.flag.trans-inclusive {
  background:
    linear-gradient(#00916e 0 14.28%, #00d2a9 0 28.57%, #7debbe 0 42.85%, white 0 57.14%, #6eaee7 0 71.42%, #5443d3 0 85.71%, #43117d 0);
}

.flag.agender {
  background:
    linear-gradient(black 0 14.28%, silver 0 28.57%, white 0 42.85%, #a3fa73 0 57.14%, white 0 71.42%, silver 0 85.71%, black 0);
}

.flag.bigender {
  background:
    linear-gradient(#d074a2 0 14.28%, #f8a1cd 0 28.57%, #d9c6ea 0 42.85%, white 0 57.14%, #d9c6ea 0 71.42%, #90c8ec 0 85.71%, #6583d5 0);
}

.flag.metagender {
  background:
    linear-gradient(black 0 14.28%, lime 0 28.57%, yellow 0 42.85%, white 0 57.14%, yellow 0 71.42%, lime 0 85.71%, black 0);
}

.flag.puppy {
  position: relative;
  background:
    /* bone */
    linear-gradient(red 0 0) 50% 50% / 37% 19% no-repeat,
    radial-gradient(red 20%, #0000 20.5%) 22.5% 36% / 37% 50% no-repeat,
    radial-gradient(red 20%, #0000 20.5%) 22.5% 64% / 37% 50% no-repeat,
    radial-gradient(red 20%, #0000 20.5%) 77.5% 36% / 37% 50% no-repeat,
    radial-gradient(red 20%, #0000 20.5%) 77.5% 64% / 37% 50% no-repeat,
    /* lines (double to avoid Chrome issue */
    linear-gradient(31.75deg, black 10.5%, darkblue 0 21%, black 0 31.5%, darkblue 0 42%, white 0 58%, darkblue 0 68.5%, #0000 0),
    linear-gradient(31.75deg, #0000 68.5%, black 0 79%, darkblue 0 89.5%, black 0);
}

.flag.leather {
  position: relative;
  background:
    linear-gradient(#fff 0 0) 50% 50% / 100% 11.11% no-repeat,
    repeating-linear-gradient(black 0 11.11%, #282388 0 22.22%)
}

.flag.leather::after {
  content: "";
  top: 1.5%;
  left: 8.5%;
  position: absolute;
  width: 26.5%;
  height: 40%;
  background: 
    radial-gradient(circle at 66.66% 33.33%, red 29.5%, #0000 30%),
    radial-gradient(circle at 33.33% 66.66%, red 29.5%, #0000 30%),
    linear-gradient(-45deg, red 50%, #0000 0);
  border-radius: 0 45%;
  transform-origin: bottom right;
  transform: rotate(1deg)
}


.flag.rubber {
  --bg: linear-gradient(black 18.5%, red 0 23%, gold 0 37.75%, red 0 42%, black 0 57%, red 0 61.25%, black 0) no-repeat;
  position: relative;
  background: var(--bg), #000;
  overflow: hidden;
  background-size: 55% 100%;
}

.flag.rubber::after {
  content: "";
  position: absolute;
  top: 28%;
  left: 30%;
  width: 100%;
  height: 100%;
  transform: rotate(-27deg);
  clip-path: polygon(57% 0, 100% 0, 100% 100%, 1% 100%);
  background: var(--bg);
  background-size: 100% 100%;
}

.flag.rubber::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 0%;
  width: 100%;
  height: 100%;
  transform: rotate(55.5deg);
  clip-path: polygon(19% 0, 100% 0, 100% 100%, 53% 100%);
  background: var(--bg);
  background-size: 100% 100%;
}


.flag.pride-of-africa {
  background: 
    /* P */
    radial-gradient(farthest-side at 0 50%, #e80000 99.9999%, #0000 0) 9% 0 / 8.4% 25%,
    linear-gradient(#fa4aa7 0 0) 0 0 / 8.3333% 25%,
    linear-gradient(90deg, #e80000 50%, #ffc621 0) 0 0 / 16.6666% 50%,
    /* R */
    radial-gradient(farthest-side at 0 50%, #ff9a0b 99.9999%, #0000 0) 27.3333% 0 / 8.3333% 25%,
    linear-gradient(#fd4603 0 0) 0 0 / 25.3333% 25%,
    linear-gradient(45deg, #fd4603 50%, #fbe10c 0) 0 0 / 33.3333% 50%,
    /* I */
    conic-gradient(at 50% 0, #0000 37.5%, #038b2a 0 62.5%, #0000 0) 40.6666% 4% / 12% 9%,
    conic-gradient(at 50% 100%, #038b2a 12.5%, #0000 0 87.5%, #038b2a 0) 40.6666% 13.6666% / 12% 9%,
    linear-gradient(#ffc621 0 0) 0 0 / 50% 25%,
    linear-gradient(90deg, #ff9a0b 75%, #038b2a 0 91.6666%, #ff9a0b 0) 0 0 / 50% 50%,
    /* D */
    radial-gradient(farthest-side, #f94ca8 55%, #e80000 0 99.9999%, #15b1da 0) 50% 0 / 33.3333% 50%,
    /* E */
    conic-gradient(#0000 243.5deg, #6c38c6 0 296.5deg, #0000 0) 100% 0 / 33.3333% 50%,
    linear-gradient(#6c38c6 25%, #f94ca8 0 75%, #6c38c6 0) 0 0 / 83.3333% 50%,
    /* of */
    radial-gradient(farthest-side, #ff7002 50%, #ffc310 0 99.9999%, #01b92f 0) 100% 0 / 16.6666% 25%,
    linear-gradient(90deg, #e80000 50%, #0000 0) 100% 0 / 16.6666% 50%,
    repeating-linear-gradient(#f94ca8 0 12.5%, #ffc310 0 25%) 100% 0 / 16.6666% 50%,
    /* A */
    conic-gradient(#f94ca8 166deg, #2e73ec 0 194deg, #f94ca8 0) 0 100% / 16.6666% 100%,
    /* F */
    linear-gradient(90deg, #6c38c6 75%, #0000 0) 0 100% / 33.3333% 50%,
    linear-gradient(#7c62e1 12.5%, #ff9a0b 0 25%, #7c62e1 0 37.5%, #ff9a0b 0 50%, #ffc621 0) 0 100% / 33.3333% 50%,
    /* R */
    radial-gradient(farthest-side at 0 50%, #f94ca8 99.9999%, #05acd9 0) 45.5555% 66.6666% / 8.3333% 25%,
    linear-gradient(#e80000 75%, #0000 0) 0 100% / 41.75% 100%,
    linear-gradient(225deg, #05acd9 50%, #e80000 0) 0 100% / 50% 75%,
    /* A */
    conic-gradient(#0ab730 166deg, #6c38c6 0 194deg, #0ab730 0) 100% 100% / 16.6666% 100%,
    /* C */
    radial-gradient(farthest-side, #f94ca8 55%, #ffc621 0 99.9999%, #038b2a 0) 100% 100% / 33.3333% 50%,
    /* I */
    conic-gradient(at 50% 0, #0000 160deg, #2e73ec 0 200deg, #0000 0) 59.1666% 60% / 10% 10%,
    conic-gradient(at 0 0, #2e73ec 120deg, #0000 0) 56.6666% 66.6666% / 7% 10%,
    conic-gradient(at 100% 0, #0000 240deg, #2e73ec 0) 61% 66.6666% / 7% 10%,
    conic-gradient(at 0 100%, #0000 25deg, #2e73ec 0 55deg, #0000 0) 57.5% 66.6666% / 6% 9%,
    conic-gradient(at 100% 100%, #0000 305deg, #2e73ec 0 335deg, #0000 0) 60% 66.6666% / 6% 9%,
    linear-gradient(#ffc621 75%, #0000 0),
    linear-gradient(90deg, #fbe10c 54.1666%, #2e73ec 0 62.5%, #fbe10c 0)
    ;
  background-repeat: no-repeat;
}

.flag.androgyne {
  background: linear-gradient(90deg, #f07 33.3%, #a0f 0 66.6%, #0be 0);
}

.flag.drag {
  --c: #f69ce4;
  background:
    /* stars ~ dots (sorry :S) */
    radial-gradient(circle at 50% 58.5%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 51.5% 58.6%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 52.85% 58.75%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 54.2% 59.1%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 55.6% 59.6%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 48.5% 58.6%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 47.15% 58.75%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 45.8% 59.1%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 44.4% 59.6%, #fff 0.75%, #0000 0),
    radial-gradient(circle at 50% 37.5%, var(--c) 1%, #0000 0),
    radial-gradient(circle at 56.25% 45.75%, var(--c) 1%, #0000 0),
    radial-gradient(circle at 43.75% 45.75%, var(--c) 1%, #0000 0),
    radial-gradient(circle at 63% 43.5%, var(--c) 1%, #0000 0),
    radial-gradient(circle at 37% 43.25%, var(--c) 1%, #0000 0),
    linear-gradient(90deg, #c35cff 33%, #0000 0 67%, #4561ff 0),
    radial-gradient(25% 20% at 50% 71%, #fff 50%, #0000 50.5%),
    /* crown 3,2,4*/
    conic-gradient(at 50% 0, #0000 165deg, var(--c) 0 195deg, #0000 0) 50% 51.5% / 10% 24% no-repeat,
    conic-gradient(at 0 35%, #0000 133deg, var(--c) 0 175deg, #0000 0) 49.25% 51.5% / 10% 24% no-repeat,
    conic-gradient(at 100% 35%, #0000 185deg, var(--c) 0 227deg, #0000 0) 50.75% 51.5% / 10% 24% no-repeat,
    /* crown 5 */
    radial-gradient(100% 140% at 115% 77%, #fff 54%, #0000 0) 57.75% 58.25% / 10% 24% no-repeat,
    radial-gradient(220% 145% at 135% 73%, var(--c) 50%, #0000 0) 57.5% 58.25% / 10% 24% no-repeat,
    /* crown 1 */
    radial-gradient(100% 140% at -15% 77%, #fff 54%, #0000 0) 42.25% 58.5% / 10% 24% no-repeat,
    radial-gradient(220% 145% at -35% 73%, var(--c) 50%, #0000 0) 42.5% 58.5% / 10% 24% no-repeat,
    #fff;
}


/* Flags - End */


/* Demo - Begin */
a {
  position: absolute;
  top:0;
  right: 0;
  width: 150px;
  height: 150px;
  background: linear-gradient(#c00 50%, #0000 0);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 50%);
  color: #fff;
  transform-origin: 50% 0;
  transform: translate(50%, 0) rotate(45deg);
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 80px;
  box-sizing: border-box;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 10.5px;
  text-decoration: none;
  line-height: 1.5;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

h1, h2 {
  font-weight: 400;
}

p, div {
  font-weight: 300;
}

article {
  display: flex;
  flex-wrap: wrap;
}

h1 {
  font-size: 2em;
  min-width: 99%;
  margin: 2vmin;
}

section {
  margin: 2vmin;
}

.flag {
  box-shadow: 0 0 0 0.5px;
  abox-shadow: 5px 5px 10px #ccc;
}
/* Demo - End */