I made all countries' flags using HTML & CSS

Jatin Sharma - Aug 28 '22 - - Dev Community

This article is special, you may ask why. It is because, in my last article CSS Flag: India, I said-

I am starting a new series called CSS Flag. Where I'll be making different countries' flags starting with India.

I asked myself "Why don't I make an article which will have all 195 countries' flags instead of creating 195 articles?". Well, Here I am.

In this article, I have made all countries' flags by just using HTML and CSS. At the end of the article. You will have a special Bonus (you have to reach the end of the article to see it).


Disclaimer

  • The idea of this series came up in my mind on 15 August as I mention in my previous article CSS Flag: India.
  • I don't want to hurt anyone's feelings or sentiments through this article. As It could offend some people if their country's flag is slightly off point. I respect every country's flag and its people. If you find any mistakes in any of the flags then please let me know. I'll fix it as soon as possible.
  • If there are some issues with Codepen in mobile devices try to switch to the desktop mode or visit through desktop/laptop browsers.
  • I have used images (PNG) in some of the flags as well because it was kind of complex to create them.
  • The size of each flag is 300x200 pixels. Some of the countries' flags use different sizes. So It could be a little bit different due to the size difference.

Table of Contents:


Afghanistan

Albania

Algeria

Andorra

Angola

Antigua and Barbuda

Argentina

Armenia

Australia

Austria

Azerbaijan

Bahamas

Bahrain

Bangladesh

Barbados

Belarus

Belgium

Belize

Benin

Bhutan

Bolivia

Bosnia and Herzegovina

Botswana

Brazil

Brunei

Bulgaria

Burkina Faso

Burundi

Cambodia

Cameroon

Canada

Cape Verde

Central African

Chad

Chile

China

Colombia

Comoros

Democratic Republic of the Congo

Republic of the Congo

Costa Rica

Croatia

Cuban

Cyprus

Czechia

Denmark

Djibouti

Dominica

Dominican

East Timor

Ecuador

Egypt

El Salvador

Equatorial Guinea

Eritrea

Estonia

Eswatini

Ethiopia

Fiji

Finland

France

Gabon

Gambia

Georgia

Germany

Ghana

Greece

Grenada

Guatemala

Guinea

Guinea-Bissau

Guyana

Haiti

Honduras

Hungary

Iceland

India

Indonesia

Iran

Iraq

Ireland

Israel

Italy

Ivory Coast

Jamaica

Japan

Jordan

Kazakhstan

Kenya

Kiribati

North Korea

South Korea

Kuwait

Kyrgyzstan

Laos

Latvia

Lebanon

Lesotho

Liberia

Libya

Liechtenstein

Lithuania

Luxembourg

Madagascar

Malawi

Malaysia

Maldives

Mali

Malta

Marshall Islands

Mauritania

Mauritius

Mexico

Micronesia

Moldova

Monaco

Mongolia

Montenegro

Morocco

Mozambique

Myanmar

Namibia

Nauru

Nepal

Netherland

New Zealand

Nicaragua

Niger

Nigeria

North Macedonia

Norway

Oman

Pakistan

Palau

Palestine

Panama

Papua New Guinea

Paraguay

Peru

Philippines

Poland

Portugal

Qatar

Romania

Russia

Rwanda

Saint Kitts and Nevis

Saint Lucia

Saint Vincent and the Grenadines

Samoa

San Marino

São Tomé and Príncipe

Saudi Arabia

Senegal

Serbia

Seychelles

Sierra Leone

Singapore

Slovakia

Slovenia

Solomon Islands

Somalia

South Africa

South Sudan

Spain

Sri Lanka

Sudan

Suriname

Sweden

Switzerland

Syria

Taiwan

Tajikistan

Tanzania

Thailand

Togo

Tonga

Trinidad and Tobago

Tunisia

Turkey

Turkmenistan

Tuvalu

Uganda

Ukraine

United Arab Emirates

United Kingdom

United States

Uruguay

Uzbekistan

Vanuatu

Vatican City

Venezuela

Vietnam

Yemen

Zambia

Zimbabwe

Bonus

As I told you at the start of the article I'll attach a bonus section. Here it is. You can find all countries' flags in the following Codepen (All in One):

Wrapping up

I have used images in some of the flags as well because it was kind of complex to create them. I hope you enjoyed the article, if you did then don't forget to press ❤️. If you have any queries or suggestions don't hesitate to drop them. You can extend your support by Buying me a Coffee. I'll see you in the next one.

References

Thumbnail image by @krisetya at Unsplash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .