LGBTQIA+ ally flag in pure CSS

#css #lgbtqia

Written by Anders Marzi Tornblad

Published on

I was experimenting with linear-gradient, clip-path and aspect-ratio in CSS, and was able to create an LGBTQIA+ ally flag using nothing but CSS. Since the html, head, and body elements are always implicitly present in the browser DOM, you don't even have to include them in an HTML file. The full index.html file looks like this:

html {
  display: flex;
  flex-direction: row;
  inset: 0 0 0 0;
  position: absolute;
  margin: 0;
  background: linear-gradient(180deg,
    black 0%, black 16.7%,
    white 16.7%, white 33.3%,
    black 33.3%, black 50%,
    white 50%, white 66.7%,
    black 66.7%, black 83.3%,
    white 83.3%, white 100%);

body {
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 66.7% 100%, 50% 66.7%, 33.3% 100%);
  background: linear-gradient(180deg,
    red 0%, red 16.7%,
    orange 16.7%, orange 33.3%,
    yellow 33.3%, yellow 50%,
    green 50%, green 66.7%,
    blue 66.7%, blue 83.3%,
    purple 83.3%, purple 100%);
  aspect-ratio: 7/4;
  margin: 0 auto;

An ally flag is a flag to show allyship with the LGBTQIA+ community. The colors in the middle are the normal rainbow flag colors, representing the LGBTQIA+ community itself. The black and white stripes on the outside represents me, as the normative, cis-gendered, heterosexual, embracing the rainbow flag in a hug, shaped like an "A" for "ally". In this implementation, the black and white stripes are the background of the html element, and the rainbow colors are the background or the body element, which has a clip-path to provide its shape.

As this year's LGBTQIA+ Pride Month is coming to an end, it provides an opportunity for introspection. As a cis-gendered, heterosexual, white man of privilege, it's important to me to reflect on my position in respect to the LGBTQIA+ community, particularly given the rising challenges faced by trans people.

I try to be an ally. I voice my support in LGBTQIA+ issues on social media, I go to Pride events, and I have a little "Ally Flag" sticker on my computer. It may not be much, and despite best intentions, I might stumble, but aiming to be an LGBTQIA+ ally is a journey of learning and engagement.

This month, the past year (and years) have been transformative. Listening to narratives different from my own, unlearning subconscious biases, and engaging in conversations have all been part of my journey. This isn't for applause, but to help dismantle oppressive systems that benefit me, simply because of who I am.

Allyship isn't confined to a month; it's a call to action that requires empathy, patience, and humility. It's about trying to make the world a more inclusive space, one conversation, one unlearned bias at a time. As Pride Month ends, my commitment as an ally continues, promising to learn, grow, and stand firm with the LGBTQIA+ community.