Scalable Pure-CSS Flags
A collection of flags rendered solely through CSS shapes, clip-paths backgrounds. All flags here are
scalable by adjusting either the width or the height of the root element (maintaining the
correct aspect ratios). Some flags are available in multiple aspect ratios. All of the country flags
are highly accurate to the colours and measurements of their construction flags found through various
online sources.
Not all the flags will render accurately due to the slight differences in browsers' rendering methods
and rounding errors. Where possible, fractional measurements are calculated in real-time using the CSS
calc() function for the most accurate results. In the rare case where this was not possible, some
measurements were rounded to 3dp. Some flags feature highly complex seals or coats of arms, in these
cases I have resorted to using SVGs embeded in data URLs. As such, I have indicated underneath each
flag the percentage of the ratio of CSS to SVG. In most cases, the flag was created purely using CSS.
The primary sources I have used are available at the bottom of the page.
Flags of Africa
Democratic Republic of the Congo
Flags of The Americas
Saint Vincent and the Grenadines
Flags of Asia
People's Republic of China
Republic of Türkiye (Turkey)
Republic of China (Taiwan)
Flags of Europe
Kingdom of the Netherlands
Flags of Oceania
Federated States of Micronesia
LGBTQ+ Pride Flags
Gray Asexual / Graysexual
Aromantic Asexual (Aroace)
Sources
Various online sources were used for the colours and measurements of each flag; the country flags
sourced from construction sheets. A large amount of my own math was also used, including fractional
math, algebra, and trigonometry to convert the sourced measurements into percentages and numbers that
would work with CSS.
-
fussyflags by Michael Lascarides. Used as a reference
sorted losely by difficulty.
-
ISO 3166 Country Codes by the International
Organization for Standardization (ISO). Used for the alpha-2 country codes used in file names and
CSS selectors for the country flags.
-
Vexilla Mundi as a source of some
construction sheets, although some proved to be inaccurate to the specifications provided by some
countries.
-
Various pages available on Wikipedia titled "Flag of *" in which peer-reviewed and source-backed
construction sheets and flag colours are usually provided. Each entry is cross-referenced with the
sources provided on the page, as well as on sourced contruction sheets. The materials referenced
are usually sourced directly from the respective country's specifications or constitutions.
-
List of aspect ratios of national flags
available on Wikipedia for accurate aspect ratios. Each entry is cross-referenced with the sources
provided on the page, as well as on sourced contruction sheets.
-
schemecolor.com as a source of some of the hex colour
codes where they were not available through other sources, especially for the pride flags.