did you know that with css you can just make whatever little inline pride flag you want and i think that's pretty cool even if none of these particular ones are about me specifically wait a second that last one is aquafresh
here are some flags. expand for html. the nice part is that you can fiddle with the styling however you like; if you hate my faint inner white border then just delete it. alternatively you can prototype your own flag right from cohost!
rainbow
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #e50000 0% 16.7%, #ff8d00 16.7% 33.3%, #fe0 33.3% 50%, #028121 50% 66.7%, #004cff 66.7% 83.3%, #708 83.3% 100%);
"></span>
bi
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #d60270 0% 40%, #9b4f96 40% 60%, #0038a8 60% 100%);
"></span>
pan
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #ff1c8d 0% 33.3%, #ffd700 33.3% 66.7%, #1ab3ff 66.7% 100%);
"></span>
lesbian
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #d62800 0% 20%, #ff9b56 20% 40%, white 40% 60%, #d462a6 60% 80%, #a40062 80% 100%);
"></span>
gay (but like, for dudes)
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #078d70 0% 14.3%, #26ceaa 14.3% 28.6%, #98e8c1 28.6% 42.9%, white 42.9% 57.1%, #7bade2 57.1% 71.4%, #5049cc 71.4% 85.7%, #3d1a78 85.7% 100%);
"></span>
ace
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, black 0% 25%, #a4a4a4 25% 50%, white 50% 75%, #810081 75% 100%);
"></span>
trans
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #5bcffb 0% 20%, #f5abb9 20% 40%, white 40% 60%, #f5abb9 60% 80%, #5bcffb 80% 100%);
"></span>
nonbinary
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #fcf431 0% 25%, #fcfcfc 25% 50%, #9d59d2 50% 75%, #282828 75% 100%);
"></span>
agender
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, black 0% 14.3%, #bababa 14.3% 28.6%, white 28.6% 42.9%, #baf484 42.9% 57.1%, white 57.1% 71.4%, #bababa 71.4% 85.7%, black 85.7% 100%);
"></span>
genderfluid
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #fe76a2 0% 20%, white 20% 40%, #bf12d7 40% 60%, black 60% 80%, #303cbe 80% 100%);
"></span>
genderqueer
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #b57fdd 0% 33.3%, white 33.3% 66.7%, #49821e 66.7% 100%);
"></span>
intersex
i took a little liberty with the size of the circle to make it readable at this small size
<span style="
display: inline-grid;
place-items: center;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: #ffd800;
"><span style="display: block; height: 75%; aspect-ratio: 1; border: 2px solid #7902aa; border-radius: 100%;"></span></span>
Ļ
poly (old, bad)
this one uses an actual pi character, so your mileage may vary. of course it's not really correct anyway since the Ļ is only supposed to be visible on the red part, but i blew it up a bit so it's not 3 pixels tall
<span style="
display: inline-grid;
place-items: center;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1ex;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, blue 0% 33.3%, red 33.3% 66.7%, black 66.7% 100%);
font-weight: bold;
color: yellow;
">Ļ</span>
ā„
poly (new, good, more complicated tho)
positioning that heart was not easy, and it's a literal heart symbol so i can't guarantee anything about the rendering for anyone else
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #009fe3 0% 33.3%, #e50051 33.3% 66.7%, #340c46 66.7% 100%);
">
<span style="display: block; position: absolute; top: -0.666em; left: -0.333em; border: 1em solid white; border-color: transparent white; border-right: none;"></span>
<span style="display: block; position: absolute; bottom: 100%; text-align: center; font-size: 0.4em; transform-origin: bottom center; transform: translate(0.4rem, 0.333rem) rotate(-90deg) scaleX(1.5); color: #fcbf00;">ā„</span>
</span>
aro
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #3ba740 0% 20%, #a8d47a 20% 40%, white 40% 60%, #ababab 60% 80%, black 80% 100%);
"></span>
