Happy Pride

Another year, another celebration of Pride. As a cis gay male, I feel it only right to share in the celebration of Pride. These flags are in no particular order.

Click the flags to get the HTML and CSS for them.

Note, clicking the HTML or CSS boxes will copy the code to your clipboard, unformatted.

Traditional Pride flag

                HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.seg-1 {
    background: #e50000;
}
.seg-2 {
    background: #ff8d00;
}
.seg-3 {
    background: #ffee00;
}
.seg-4 {
    background: #028121;
}
.seg-5 {
    background: #004cff;
}
.seg-6 {
    background: #760088;
}
.article-flag .seg-1,
.article-flag .seg-2,
.article-flag .seg-3,
.article-flag .seg-4,
.article-flag .seg-5,
.article-flag .seg-6 {
    height: 30px;
}

Transgender Pride flag

                HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.transgender-seg-1 {
    background-color: #74D7EE;
}
.transgender-seg-2 {
    background-color: #FFAFC8;
}
.transgender-seg-3 {
    background-color: #FFFFFF;
}
.article-flag .transgender-seg-1, 
.article-flag .transgender-seg-2, 
.article-flag .transgender-seg-3 {
    height: 36px;
}

Bisexual Pride flag

                HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.bisexual-seg-1 {
    background-color: #d70371;
}
.bisexual-seg-2 {
    background-color: #734f97;
}
.bisexual-seg-3 {
    background-color: #0038a9;
}
.article-flag .bisexual-seg-1, 
.article-flag .bisexual-seg-3 {
    height: 72px;
} 
.article-flag .bisexual-seg-2 {
    height: 36px;
}

Lesbian Pride flag

                HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.lesbian-seg-1 {
    background-color: #d62c00;
}
.lesbian-seg-2 {
    background-color: #ff9956;
}
.lesbian-seg-3 {
    background-color: #ffffff;
}
.lesbian-seg-4 {
    background-color: #d362a4;
}
.lesbian-seg-5 {
    background-color: #a40162;
}
.article-flag .lesbian-seg-1, 
.article-flag .lesbian-seg-2, 
.article-flag .lesbian-seg-3,
.article-flag .lesbian-seg-4,
.article-flag .lesbian-seg-5, {
    height: 36px;
}

Progress Pride flag

Note: (This one could use some work, the size of the progress part should be larger.)

HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.progress-container-article {
    position: absolute;
    height: 200px;
    width: 200px;
    overflow: hidden;
    z-index: 1;
}
.progress-inner-article {
    position: absolute;
    left: 0px;
    top: 72px;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 150px;
    height: 100px;
}
.progress-inner-article div {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 100px;
}
.progress-seg-1 {
    background-color: #000000;
}
.progress-seg-2 {
    background-color: #613915;
}
.progress-seg-3 {
    background-color: #74D7EE;
}
.progress-seg-4 {
    background-color: #FFAFC8;
}
.progress-seg-5 {
    background-color: #FFFFFF;
}
.seg-1 {
    background: #e50000;
}
.seg-2 {
    background: #ff8d00;
}
.seg-3 {
    background: #ffee00;
}
.seg-4 {
    background: #028121;
}
.seg-5 {
    background: #004cff;
}
.seg-6 {
    background: #760088;
}
.article-flag .seg-1,
.article-flag .seg-2,
.article-flag .seg-3,
.article-flag .seg-4,
.article-flag .seg-5,
.article-flag .seg-6 {
    height: 30px;
}

Nonbinary Pride flag

                HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.nonbinary-seg-1 {
    background-color: #f5ea2a;
}
.nonbinary-seg-2 {
    background-color: #ffffff;
}
.nonbinary-seg-3 {
    background-color: #9a59cf;
}
.nonbinary-seg-4 {
    background-color: #2d2d2d;
}
.article-flag .nonbinary-seg-1,
.article-flag .nonbinary-seg-2,
.article-flag .nonbinary-seg-3,
.article-flag .nonbinary-seg-4 {
    height: 45px;
}

Pansexual Pride flag

                HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.pansexual-seg-1 {
    background-color: #ff218c;
}
.pansexual-seg-2 {
    background-color: #ffd800;
}
.pansexual-seg-3 {
    background-color: #20b2fe;
}
.article-flag .pansexual-seg-1, 
.article-flag .pansexual-seg-2, 
.article-flag .pansexual-seg-3 {
    height: 60px;
}

Polysexual Pride flag

                HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.polysexual-seg-1 {
    background-color: #f61cb9;
}
.polysexual-seg-2 {
    background-color: #06d569;
}
.polysexual-seg-3 {
    background-color: #1c92f6;
}
.article-flag .polysexual-seg-1, 
.article-flag .polysexual-seg-2, 
.article-flag .polysexual-seg-3 {
    height: 60px;
}

Asexual Pride flag

                HTML

                Stylesheet
                
.article-flag {
    width: 27.5%;
    margin: 2em;
    display: inline-block;
}
.rounded-edges-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.rounded-edges-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.asexual-seg-1 {
    background-color: #000000;
}
.asexual-seg-2 {
    background-color: #a0a0a0;
}
.asexual-seg-3 {
    background-color: #ffffff;
}
.asexual-seg-4 {
    background-color: #9a0778;
}
.article-flag .asexual-seg-1,
.article-flag .asexual-seg-2,
.article-flag .asexual-seg-3,
.article-flag .asexual-seg-4 {
    height: 45px;
}