Single Div Pure CSS Flags
-
1
algeria
-
2
armenia
-
3
austria
-
4
azerbaijan
-
5
bahamas
-
6
bahrain
-
7
bangladesh
-
8
barbados
-
9
belgium
-
10
benin
-
11
bolivia
-
12
botswana
-
13
brazil
-
14
bulgaria
-
15
burkina faso
-
16
burundi
-
17
cameroon
-
18
central african republic
-
19
chad
-
20
chile
-
21
colombia
-
22
comoros
-
23
costa rica
-
24
cote d ivoire
-
25
cuba
-
26
czech republic
-
27
democratic republic of congo
-
28
denmark
-
29
djibouti
-
30
east timor
-
31
estonia
-
32
finland
-
33
france
-
34
gabon
-
35
the gambia
-
36
germany
-
37
ghana
-
38
greece
-
39
guinea
-
40
guinea bissau
-
41
guyana
-
42
hungary
-
43
iceland
-
44
india
-
45
indonesia
-
46
iran
-
47
iraq
-
48
ireland
-
49
israel
-
50
italy
-
51
jamaica
-
52
japan
-
53
kuwait
-
54
laos
-
55
latvia
-
56
liberia
-
57
libya
-
58
lithuania
-
59
luxembourg
-
60
madagascar
-
61
malaysia
-
62
maldives
-
63
mali
-
64
mauritania
-
65
mauritius
-
66
monaco
-
67
myanmar
-
68
namibia
-
69
nauru
-
70
nepal
-
71
the netherlands
-
72
niger
-
73
nigeria
-
74
north korea
-
75
norway
-
76
pakistan
-
77
palau
-
78
panama
-
79
peru
-
80
phillippines
-
81
poland
-
82
qatar
-
83
republic of china
-
84
republic of congo
-
85
romania
-
86
russia
-
87
rwanda
-
88
saint kitts and nevis
-
89
saint lucia
-
90
sao tome and principe
-
91
senegal
-
92
seychelles
-
93
sierra leone
-
94
somalia
-
95
south sudan
-
96
sudan
-
97
suriname
-
98
sweden
-
99
switzerland
-
100
syria
-
101
tanzania
-
102
thailand
-
103
togo
-
104
tonga
-
105
trinidad and tobago
-
106
tunisia
-
107
turkey
-
108
ukraine
-
109
uae
-
110
the united kingdom
-
111
vietnam
-
112
western sahara
-
113
yemen
Single Div Pure CSS Flags
Made by @dhanishgajjar
-
1
algeria
-
2
armenia
-
3
austria
-
4
azerbaijan
-
5
bahamas
-
6
bahrain
-
7
bangladesh
-
8
barbados
-
9
belgium
-
10
benin
-
11
bolivia
-
12
botswana
-
13
brazil
-
14
bulgaria
-
15
burkina faso
-
16
burundi
-
17
cameroon
-
18
central african republic
-
19
chad
-
20
chile
-
21
colombia
-
22
comoros
-
23
costa rica
-
24
cote d ivoire
-
25
cuba
-
26
czech republic
-
27
democratic republic of congo
-
28
denmark
-
29
djibouti
-
30
east timor
-
31
estonia
-
32
finland
-
33
france
-
34
gabon
-
35
the gambia
-
36
germany
-
37
ghana
-
38
greece
-
39
guinea
-
40
guinea bissau
-
41
guyana
-
42
hungary
-
43
iceland
-
44
india
-
45
indonesia
-
46
iran
-
47
iraq
-
48
ireland
-
49
israel
-
50
italy
-
51
jamaica
-
52
japan
-
53
kuwait
-
54
laos
-
55
latvia
-
56
liberia
-
57
libya
-
58
lithuania
-
59
luxembourg
-
60
madagascar
-
61
malaysia
-
62
maldives
-
63
mali
-
64
mauritania
-
65
mauritius
-
66
monaco
-
67
myanmar
-
68
namibia
-
69
nauru
-
70
nepal
-
71
the netherlands
-
72
niger
-
73
nigeria
-
74
north korea
-
75
norway
-
76
pakistan
-
77
palau
-
78
panama
-
79
peru
-
80
phillippines
-
81
poland
-
82
qatar
-
83
republic of china
-
84
republic of congo
-
85
romania
-
86
russia
-
87
rwanda
-
88
saint kitts and nevis
-
89
saint lucia
-
90
sao tome and principe
-
91
senegal
-
92
seychelles
-
93
sierra leone
-
94
somalia
-
95
south sudan
-
96
sudan
-
97
suriname
-
98
sweden
-
99
switzerland
-
100
syria
-
101
tanzania
-
102
thailand
-
103
togo
-
104
tonga
-
105
trinidad and tobago
-
106
tunisia
-
107
turkey
-
108
ukraine
-
109
uae
-
110
the united kingdom
-
111
vietnam
-
112
western sahara
-
113
yemen
.flag {
width: 180px;
height: 120px;
overflow: hidden;
border: 1px solid #efefef;
}
.algeria {
background: linear-gradient(90deg, #006232, #006232 50%, white 50%, white 100%);
position: relative; }
.algeria:before {
position: absolute;
content: "";
border-radius: 50%;
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
width: 50px;
height: 50px;
background: transparent;
box-shadow: -9px 0 0 8px #D21034;
top: 35px;
right: -10px; }
.algeria:after {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
color: #D21034;
font-size: 2em;
transform: rotate(20deg);
top: calc(50% - 6px);
left: calc(50% - 5px);
}
.armenia {
background: linear-gradient(180deg, #D90012, #D90011 calc(100% / 3), #0033A0 calc(100% / 3), #0033A0 calc(100% / 3 * 2), #F2A800 calc(100% / 3 * 2), #F2A800 100%); }
.austria {
background: linear-gradient(180deg, #ED2939, #ED2939 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #ED2939 calc(100% / 3 * 2), #ED2939 100%); }
.azerbaijan {
background: linear-gradient(180deg, #00b5e2, #00b5e2 calc(100% / 3), #ef3340 calc(100% / 3), #ef3340 calc(100% / 3 * 2), #509e2f calc(100% / 3 * 2), #509e2f 100%);
position: relative; }
.azerbaijan:before {
position: absolute;
content: "";
border-radius: 50%;
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
background: transparent;
width: 30px;
height: 30px;
top: calc(50% - 15px);
left: -6px;
box-shadow: -4px 0 0 3px white; }
.azerbaijan:after {
position: absolute;
content: "?";
color: white;
font-size: 24px;
transform: rotate(22deg);
top: calc(50% - 13px);
left: 52%; }
.bahamas {
background: linear-gradient(146deg, black 25%, transparent 15%) 0 -60px, linear-gradient(34deg, black 25%, transparent 15%) 0 -60px, linear-gradient(to bottom, #00ABC9, #00ABC9 calc(100% / 3), #FAE042 calc(100% / 3), #FAE042 calc(100% / 3 * 2), #00ABC9 calc(100% / 3 * 2), #00ABC9 100%);
background-size: 180px 120px; }
.bahrain {
background: linear-gradient(90deg, white, white 25%, #CE1126 25%, #CE1126 100%);
position: relative; }
.bahrain:before {
position: absolute;
content: "";
width: 24px;
height: 100%;
background: linear-gradient(154deg, white 32%, transparent 31%) 0 12px, linear-gradient(24deg, white 32%, transparent 31%) 0 36px;
background-size: 24px 24px;
left: 44px;
top: 0; }
.bangladesh {
background: radial-gradient(110px at 40% 50%, #F42A41 0, #F42A41 35%, transparent 35%, transparent 100%), #006A4E; }
.barbados {
background: linear-gradient(to right, #00267F, #00267F calc(100% / 3), #FFC726 calc(100% / 3), #FFC726 calc(100% / 3 *2), #00267F calc(100% / 3 *2), #00267F 100%);
position: relative; }
.barbados:before {
position: absolute;
content: "?";
font-size: 3em;
left: calc(50% - 18px);
top: 32px; }
.belgium {
background: linear-gradient(to right, black, black calc(100% / 3), #FAE042 calc(100% / 3), #FAE042 calc(100% / 3 *2), #ED2939 calc(100% / 3 *2), #ED2939 100%); }
.benin {
background: linear-gradient(to right, #008751, #008751 40%, transparent 40%, transparent 100%), linear-gradient(to bottom, #FCD116, #FCD116 50%, #E8112D 50%, #E8112D 100%); }
.bolivia {
background: linear-gradient(to bottom, #D52B1E, #D52B1E calc(100% / 3), #FFE000 calc(100% / 3), #FFE000 calc(100% / 3 *2), #007934 calc(100% / 3 *2), #007934 100%); }
.botswana {
background: linear-gradient(0deg, #75AADB, #75AADB 35%, white 35%, white 40%, black 40%, black 60%, white 60%, white 65%, #75AADB 65%, #75AADB 100%); }
.brazil {
background: linear-gradient(149deg, #009B3A 30%, transparent 25%), linear-gradient(-149deg, #009B3A 30%, transparent 25%), linear-gradient(-30deg, #009B3A 30%, transparent 25%), linear-gradient(30deg, #009B3A 30%, transparent 25%), radial-gradient(90px at 50% 50%, transparent 0, transparent 35%, #FEDF00 35%, #FEDF00 100%), radial-gradient(180px at 40% 96%, transparent 0, transparent 35%, white 35%, white 39%, transparent 39%, transparent 100%), #002776;
overflow: hidden; }
.bulgaria {
background: linear-gradient(to bottom, white, white calc(100% / 3), #00966E calc(100% / 3), #00966E calc(100% / 3 *2), #D62612 calc(100% / 3 *2), #D62612 100%); }
.burkina {
background: linear-gradient(to bottom, #EF2B2D, #EF2B2D 50%, #009E49 50%, #009E49 100%);
position: relative; }
.burkina:after {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
top: calc(50% - 24px);
font-size: 36px;
color: #FCD116; }
.burundi {
background: radial-gradient(100px at 50% 50%, white 0, white 35%, transparent 35%, transparent 100%), linear-gradient(146deg, #CE1126 20%, transparent 15%) 90px -118px, linear-gradient(-146deg, #CE1126 20%, transparent 15%) 90px -118px, linear-gradient(-34deg, #CE1126 20%, transparent 15%) 90px 118px, linear-gradient(34deg, #CE1126 20%, transparent 15%) 90px 118px, linear-gradient(146deg, #1EB53A 20%, transparent 15%) 0 -60px, linear-gradient(34deg, #1EB53A 20%, transparent 15%) 0 -60px, linear-gradient(-146deg, #1EB53A 20%, transparent 15%) 180px -60px, linear-gradient(-34deg, #1EB53A 20%, transparent 15%) 180px -60px, #FFFFFF;
position: relative; }
.burundi:before {
position: absolute;
content: "?";
font-size: 18px;
-webkit-text-stroke: .5px #1EB53A;
width: 180px;
height: 120px;
text-align: center;
top: 36px;
color: #CE1126; }
.burundi:after {
position: absolute;
content: "? ?";
font-size: 18px;
-webkit-text-stroke: .5px #1EB53A;
width: 180px;
height: 120px;
text-align: center;
top: 60px;
color: #CE1126; }
.cameroon {
background: linear-gradient(to right, #007A5E, #007A5E calc(100% / 3), #CE1126 calc(100% / 3), #CE1126 calc(100% / 3 *2), #FCD116 calc(100% / 3 *2), #FCD116 100%);
position: relative; }
.cameroon:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
color: #FCD116;
font-size: 26px;
top: 40%; }
.central-african-republic {
background: linear-gradient(to right, transparent 0%, transparent 42%, #D21034 42%, #D21034 58%, transparent 58%, transparent 100%), linear-gradient(to bottom, #003082, #003082 25%, white 25%, white 50%, #289728 50%, #289728 75%, #FFCE00 75%, #FFCE00 100%);
position: relative; }
.central-african-republic:before {
position: absolute;
content: "?";
top: 3px;
color: #FFCE00;
font-size: 22px;
left: 15px; }
.chad {
background: linear-gradient(to right, #002664, #002664 calc(100% / 3), #FECB00 calc(100% / 3), #FECB00 calc(100% / 3 * 2), #C60C30 calc(100% / 3 * 2), #C60C30 100%); }
.chile {
background: linear-gradient(to bottom, white, white 50%, #D52B1E 50%, #D52B1E 100%);
position: relative; }
.chile:after {
position: absolute;
content: "?";
box-sizing: border-box;
color: white;
font-size: 26px;
text-align: center;
background: #0039A6;
height: 60px;
width: 60px;
left: 0;
padding-top: 16px; }
.colombia {
background: linear-gradient(to bottom, #FCD116 0%, #FCD116 50%, #003893 50%, #003893 75%, #CE1126 75%, #CE1126 100%); }
.comoros {
background: linear-gradient(146deg, #3D8E33 25%, transparent 15%) 0 -60px, linear-gradient(34deg, #3D8E33 25%, transparent 15%) 0 -60px, linear-gradient(to bottom, #FFC61E 0%, #FFC61E 25%, white 25%, white 50%, #CE1025 50%, #CE1126 75%, #3A75C4 75%, #3A75C4 100%);
position: relative;
background-size: 180px 120px; }
.comoros:before {
position: absolute;
content: "";
border-radius: 50%;
height: 50px;
width: 50px;
left: 20px;
top: 36px;
box-shadow: -10px 0 0 0 white; }
.comoros:after {
position: absolute;
content: "? ? ? ?";
color: white;
width: 8px;
font-size: 8px;
top: 44px;
left: 34px; }
.costa-rica {
background: linear-gradient(to bottom, #002A7F 15%, white 15%, white 35%, #CE1126 35%, #CE1126 65%, white 65%, white 85%, #002B7F 85%, #002B7F 100%); }
.cote-d-ivoire {
background: linear-gradient(to right, #F77F00 calc(100% / 3), white calc(100% / 3), calc(100% / 3 * 2), #009E60 calc(100% / 3 * 2), #009E60 100%); }
.cuba {
background: linear-gradient(146deg, #CF142B 25%, transparent 15%) 0 -60px, linear-gradient(34deg, #CF142B 25%, transparent 15%) 0 -60px, linear-gradient(to bottom, #002A8F 20%, white 20%, white 40%, #002A8F 40%, #002A8F 60%, white 60%, white 80%, #002A8F 80%, #002A8F 100%);
background-size: 180px 120px;
position: relative; }
.cuba:before {
position: absolute;
content: "?";
color: white;
font-size: 24px;
top: 46px;
left: 20px; }
.czech-republic {
background: linear-gradient(146deg, #11457E 25%, transparent 15%) 0 -60px, linear-gradient(34deg, #11457E 25%, transparent 15%) 0 -60px, linear-gradient(to bottom, white 50%, #D7141A 50%);
background-size: 180px 120px; }
.democratic-republic-of-congo {
background: linear-gradient(146deg, #007FFF 0%, #007FFF 45%, #F7D618 45%, #F7D618 50%, #CE1021 50%, #CE1021 60%, #F7D618 60%, #F7D618 65%, #007FFF 65%, #007FFF 100%);
position: relative; }
.democratic-republic-of-congo:before {
position: absolute;
content: "?";
color: #F7D618;
font-size: 36px;
top: 10px;
left: 20px; }
.denmark {
background: linear-gradient(to bottom, transparent 40%, white 40%, white 55%, transparent 55%, transparent 100%), linear-gradient(to right, transparent 30%, white 30%, white 40%, transparent 40%, transparent 100%), #C60C30; }
.djibouti {
background: linear-gradient(146deg, white 25%, transparent 15%) 0 -60px, linear-gradient(34deg, white 25%, transparent 15%) 0 -60px, linear-gradient(to bottom, #6AB2E7 50%, #12AD2B 50%);
background-size: 180px 120px;
position: relative; }
.djibouti:before {
position: absolute;
content: "?";
color: #D7141A;
font-size: 30px;
top: 44px;
left: 16px; }
.east-timor {
background: linear-gradient(145deg, black 25%, transparent 15%) 0 -60px, linear-gradient(34deg, black 25%, transparent 15%) 0 -60px, linear-gradient(155deg, #FFC726 30%, transparent 15%) 0 -60px, linear-gradient(25deg, #FFC726 30%, transparent 15%) 0 -60px, #DC241F;
position: relative; }
.east-timor:before {
position: absolute;
content: "?";
color: white;
font-size: 36px;
top: 36px;
left: 16px;
transform: rotate(115deg); }
.estonia {
background: linear-gradient(to bottom, #4891D9 calc(100% / 3), black calc(100% / 3), black calc(100% / 3 * 2), white calc(100% / 3 * 2)); }
.finland {
background: linear-gradient(to bottom, transparent 35%, #003580 35%, #003580 60%, transparent 60%), linear-gradient(to right, transparent 30%, #003580 30%, #003480 45%, transparent 45%), white; }
.france {
background: linear-gradient(to right, #002395 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #ED2939 calc(100% / 3 * 2)); }
.gabon {
background: linear-gradient(to bottom, #009E60 calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #3A75C4 calc(100% / 3 * 2)); }
.the-gambia {
background: linear-gradient(to bottom, #CE1126 30%, white 30%, white 35%, #0C1C8C 35%, #0C1C8C 65%, white 65%, white 70%, #3A7728 70%); }
.germany {
background: linear-gradient(to bottom, black calc(100% / 3), #DD0000 calc(100% / 3), #DD0000 calc(100% / 3 * 2), #FFCE00 calc(100% / 3 * 2)); }
.ghana {
background: linear-gradient(to bottom, #CE1126 calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #006B3F calc(100% / 3 * 2));
position: relative; }
.ghana:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
color: black;
text-align: center;
font-size: 40px;
top: calc(50% - 22px); }
.greece {
background-image: repeating-linear-gradient(to bottom, #0D5EAF, #0D5EAF calc(120px / 9), white calc(120px / 9), white calc(120px / 9 * 2));
position: relative; }
.greece:before {
position: absolute;
content: "";
width: calc(120px / 9 * 5);
height: calc(120px / 9 * 5);
background: linear-gradient(to bottom, transparent calc(120px / 9 * 2), white calc(120px / 9 * 2), white calc(120px / 9 * 3), transparent calc(120px / 9 * 3)), linear-gradient(to right, transparent calc(120px / 9 * 2), white calc(120px / 9 * 2), white calc(120px / 9 * 3), transparent calc(120px / 9 * 3)), #0D5EAF; }
.guinea {
background: linear-gradient(to right, #CE1126 calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #009460 calc(100% / 3 * 2)); }
.guinea-bissau {
background: linear-gradient(to right, #CE1126 35%, transparent 35%), linear-gradient(to bottom, #FCD116 50%, #009E49 50%);
position: relative; }
.guinea-bissau:before {
position: absolute;
content: "?";
color: black;
font-size: 40px;
top: calc(50% - 27px);
left: 10px; }
.guyana {
background: linear-gradient(149deg, #CE1126 24%, transparent 15%) 0 -60px, linear-gradient(31deg, #CE1126 24%, transparent 15%) 0 -60px, linear-gradient(149deg, black 26%, transparent 15%) 0 -60px, linear-gradient(31deg, black 26%, transparent 15%) 0 -60px, linear-gradient(160deg, #FCD116 32%, transparent 15%) 0 -60px, linear-gradient(20deg, #FCD116 32%, transparent 15%) 0 -60px, linear-gradient(161deg, white 34%, transparent 15%) 0 -60px, linear-gradient(19deg, white 34%, transparent 15%) 0 -60px, #009E49; }
.hungary {
background: linear-gradient(to bottom, #CD2A3E calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #436F4D calc(100% / 3 * 2)); }
.iceland {
background: linear-gradient(to bottom, transparent 43%, #D72828 43%, #D72828 54%, transparent 54%), linear-gradient(to right, transparent 34%, #D72828 34%, #D72828 41%, transparent 41%), linear-gradient(to right, transparent 30%, white 30%, white 45%, transparent 45%), linear-gradient(to bottom, transparent 38%, white 38%, white 59%, transparent 59%), #003897; }
.indonesia {
background: linear-gradient(to bottom, #CE1126 50%, white 50%); }
.iran {
background: linear-gradient(to bottom, #239F40 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #DA0000 calc(100% / 3 * 2));
position: relative; }
.iran:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
font-size: 44px;
text-align: center;
font-weight: bold;
color: #DA0000;
top: 28%; }
.iraq {
background: linear-gradient(to bottom, #CE1126 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2));
position: relative; }
.iraq:before {
position: absolute;
content: "???? ????";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
font-family: 'Noto Kufi Arabic', sans-serif;
font-size: 20px;
text-align: center;
font-weight: bold;
color: #449D71;
top: 42%; }
.ireland {
background: linear-gradient(to right, #169B62 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #FF883E calc(100% / 3 * 2)); }
.israel {
background: linear-gradient(to bottom, transparent 15%, #0038B8 15%, #0038B8 30%, transparent 30%, transparent 70%, #0038B8 70%, #0038B8 85%, transparent 85%), white;
position: relative; }
.israel:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
top: 28%;
font-size: 48px;
font-weight: bold;
-webkit-text-stroke: 1px #0038B8;
color: #0038B8; }
.italy {
background: linear-gradient(to right, #009246 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #CE2B37 calc(100% / 3 * 2)); }
.jamaica {
background: linear-gradient(146deg, #009b3a 20%, transparent 15%) 90px -118px, linear-gradient(-146deg, #009B3A 20%, transparent 15%) 90px -118px, linear-gradient(-34deg, #009B3A 20%, transparent 15%) 90px 118px, linear-gradient(34deg, #009B3A 20%, transparent 15%) 90px 118px, linear-gradient(146deg, black 20%, transparent 15%) 0 -60px, linear-gradient(34deg, black 20%, transparent 15%) 0 -60px, linear-gradient(-146deg, black 20%, transparent 15%) 180px -60px, linear-gradient(-34deg, black 20%, transparent 15%) 180px -60px, #FED100; }
.japan {
background: radial-gradient(100px at 50% 50%, #BC002D 0, #BC002D 35%, transparent 35%, transparent 100%), white; }
.kuwait {
background: white;
border-left: 50px solid black;
border-top: 35px solid #007A3D;
border-bottom: 35px solid #CE1126; }
.laos {
background: radial-gradient(70px at 50% 50%, white 0, white 35%, transparent 35%, transparent 100%), linear-gradient(to bottom, #CE1126 25%, #002868 25%, #002868 75%, #CE1126 75%); }
.latvia {
background: linear-gradient(to bottom, #9E3039 40%, white 40%, white 60%, #9E3039 60%); }
.liberia {
background: repeating-linear-gradient(to bottom, #BF0A30, #BF0A30 calc(120px / 11), white 10.9090909091px, white 21.8181818182px);
position: relative; }
.liberia:before {
position: absolute;
content: "?";
color: white;
font-size: 24px;
box-sizing: border-box;
background: #002868;
text-align: center;
padding-top: 14px;
width: calc(120px / 11 * 5);
height: calc(120px / 11 * 5); }
.libya {
background: radial-gradient(45px at 52% 50%, black 0, black 35%, transparent 35%, transparent 100%), radial-gradient(50px at 50% 50%, white 0, white 35%, transparent 35%, transparent 100%), linear-gradient(to bottom, #E70013 25%, black 25%, black 75%, #239E46 65%);
position: relative; }
.libya:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
color: white;
text-align: center;
top: 42%;
left: 20%;
transform: rotate(45deg); }
.lithuania {
background: linear-gradient(to bottom, #FDB913 calc(100% / 3), #006A44 calc(100% / 3), #006A44 calc(100% / 3 * 2), #C1272D calc(100% / 3 * 2)); }
.luxembourg {
background: linear-gradient(to bottom, #ED2939 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #00A1DE calc(100% / 3 * 2)); }
.madagascar {
background: linear-gradient(to right, white 30%, transparent 30%), linear-gradient(to bottom, #FC3D32 50%, #007E3A 50%); }
.malaysia {
background: repeating-linear-gradient(to bottom, #BF0A30, #BF0A30 calc(120px / 13), white 9.2307692308px, white 18.4615384615px);
position: relative; }
.malaysia:before {
position: absolute;
content: "?";
color: #FFCC00;
font-size: 48px;
box-sizing: border-box;
background: radial-gradient(65px at 50% 50%, #010066 0, #010066 35%, transparent 35%, transparent 100%), radial-gradient(75px at 42% 50%, #FFCC00 0, #FFCC00 35%, transparent 35%, transparent 100%), #010066;
text-align: center;
padding-top: 5px;
padding-left: 36px;
width: calc(180px / 2);
height: calc(120px / 13 * 7); }
.maldives {
border: 30px solid #D21034;
background: radial-gradient(55px at 55% 50%, #007E3A 0, #007E3A 35%, transparent 35%, transparent 100%), radial-gradient(60px at 50% 50%, white 0, white 35%, transparent 35%, transparent 100%), #007E3A; }
.mali {
background: linear-gradient(to right, #14B53A calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #CE1126 calc(100% / 3 * 2)); }
.mauritania {
background: radial-gradient(120px at 50% 30%, #006233 0, #006233 35%, transparent 35%, transparent 100%), radial-gradient(120px at 50% 40%, #FFC400 0, #FFC400 35%, transparent 35%, transparent 100%), #006233;
position: relative; }
.mauritania:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
font-size: 24px;
color: #FFC400;
text-align: center;
top: 15%; }
.mauritius {
background: linear-gradient(to bottom, #EA2839 25%, #1A206D 25%, #1A206D 50%, #FFD500 50%, #FFD500 75%, #00A551 75%); }
.monaco {
background: linear-gradient(to bottom, #CE1126 50%, white 50%); }
.myanmar {
background: linear-gradient(to bottom, #FECB00 calc(100% / 3), #34B233 calc(100% / 3), #34B233 calc(100% / 3 * 2), #EA2839 calc(100% / 3 * 2));
position: relative; }
.myanmar:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
color: white;
font-size: 64px;
text-align: center;
top: 20px; }
.namibia {
background: linear-gradient(146deg, #003580 45%, white 45%, white 50%, #D21034 50%, #D21034 60%, white 60%, white 65%, #009543 65%);
position: relative; }
.namibia:before {
position: absolute;
content: "?";
color: #FFCE00;
font-size: 64px;
left: 10px; }
.namibia:after {
position: absolute;
content: "";
border-radius: 50%;
height: 24px;
width: 24px;
background: #FFCE00;
border: 3px solid #003580;
top: 22px;
left: 20px; }
.nauru {
background: linear-gradient(to bottom, transparent 45%, #FFC61E 45%, #FFC61E 55%, transparent 55%), #002B7F;
position: relative; }
.nauru:before {
position: absolute;
content: "?";
color: white;
font-size: 44px;
left: 30px;
top: 60px; }
.nepal {
background: radial-gradient(44px at 16% 34%, #DC1038 0, #DC143C 35%, transparent 35%, transparent 100%), radial-gradient(44px at 16% 39%, white 0, white 35%, transparent 35%, transparent 100%), linear-gradient(40deg, #DC143C 30%, transparent 30%) 4px -6px, linear-gradient(33deg, #DC143C 25%, transparent 25%) 4px -54px, linear-gradient(40deg, #003893 36%, transparent 32%), linear-gradient(33deg, #003893 30%, transparent 25%) 0px -50px;
background-size: 180px 120px;
position: relative; }
.nepal:before {
position: absolute;
content: "?";
color: white;
font-size: 48px;
bottom: 4px;
left: 10px; }
.nepal:after {
position: absolute;
content: "?";
color: white;
font-size: 28px;
top: 36px;
left: 18px; }
.the-netherlands {
background: linear-gradient(to bottom, #AE1C28 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #21468B calc(100% / 3 * 2)); }
.new-zealand {
background: #00247D;
background-size: 100px 100px;
position: relative; }
.new-zealand:before {
position: absolute;
content: "";
top: 0;
left: 0;
background: linear-gradient(to bottom, transparent 40%, #CC142B 40%, #CC142B 60%, transparent 60%), linear-gradient(to right, transparent 45%, #CC142B 45%, #CC142B 55%, transparent 55%), linear-gradient(to bottom, transparent 35%, white 35%, white 65%, transparent 65%), linear-gradient(to right, transparent 40%, white 40%, white 60%, transparent 60%), linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -45px 31px, linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 46px -35px, linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -51px -31px, linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 48px 32px, linear-gradient(146deg, transparent 45%, white 45%, white 55%, transparent 55%), linear-gradient(34deg, transparent 45%, white 45%, white 55%, transparent 55%);
background-size: 90px 60px;
width: 90px;
height: 60px;
background-repeat: no-repeat; }
.niger {
background: radial-gradient(50px at 50% 50%, #E05206 0, #E05206 35%, transparent 35%, transparent 100%), linear-gradient(to bottom, #E05206 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #0DB02B calc(100% / 3 * 2)); }
.nigeria {
background: linear-gradient(to right, #008751 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #008751 calc(100% / 3 * 2)); }
.north-korea {
background: radial-gradient(80px at 35% 50%, white, white 35%, transparent 35%, transparent 100%), linear-gradient(to bottom, #024FA2 15%, white 15%, white 20%, #ED1C27 20%, #ED1C27 80%, white 80%, white 85%, #024FA2 85%);
position: relative; }
.north-korea:before {
position: absolute;
content: "?";
color: #ED1C27;
font-size: 48px;
left: 38px;
top: 31px; }
.norway {
background: linear-gradient(to bottom, transparent 43%, #002868 43%, #002868 54%, transparent 54%), linear-gradient(to right, transparent 28%, #002868 28%, #002868 37%, transparent 37%), linear-gradient(to right, transparent 25%, white 25%, white 40%, transparent 40%), linear-gradient(to bottom, transparent 38%, white 38%, white 59%, transparent 59%), #EF2B2D; }
.pakistan {
background: radial-gradient(90px at 71% 42%, #01411C, #01411C 35%, transparent 35%, transparent 100%), radial-gradient(100px at 65% 50%, white, white 35%, transparent 35%, transparent 100%), linear-gradient(to right, white 30%, #01411C 30%);
position: relative; }
.pakistan:before {
position: absolute;
content: "?";
color: white;
transform: rotate(40deg);
font-size: 24px;
right: 30px;
top: 25px; }
.palau {
background: radial-gradient(100px at 40% 50%, #FFDE00, #FFDE00 35%, transparent 35%, transparent 100%), #4AADD6; }
.panama {
background: linear-gradient(90deg, #005293 50%, transparent 50%), linear-gradient(#D21034 50%, transparent 50%), white;
position: relative; }
.panama:before, .panama:after {
position: absolute;
content: "?";
box-sizing: border-box;
background: white;
font-size: 32px;
padding-left: 15%;
padding-top: 6%;
width: 89px;
height: 59px; }
.panama:before {
color: #005293; }
.panama:after {
right: 0;
bottom: 0;
color: #D21034; }
.peru {
background: linear-gradient(to right, #D91023 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #D91023 calc(100% / 3 * 2)); }
.poland {
background: linear-gradient(to bottom, white 50%, #DC143C 50%); }
.qatar {
background: linear-gradient(90deg, white 25%, #8D1B3D 25%);
position: relative; }
.qatar:before {
position: absolute;
content: "";
width: 20px;
height: 100%;
background: linear-gradient(160deg, white 30%, transparent 12%) 0 7px, linear-gradient(20deg, white 30%, transparent 12%) 0 7px;
background-size: 20px calc(120px / 9.1);
left: 44px;
top: 0; }
.republic-of-china {
background: #FE0000;
position: relative; }
.republic-of-china:before {
position: absolute;
content: "?";
box-sizing: border-box;
color: white;
background: #000095;
padding-left: 20px;
top: 0;
width: 90px;
height: 60px;
font-size: 56px; }
.republic-of-china:after {
position: absolute;
content: "";
border-radius: 50%;
height: 20px;
width: 20px;
background: white;
border: 2px solid #000095;
top: 20px;
left: 30px; }
.republic-of-congo {
background: linear-gradient(135deg, #009543 40%, #FBDE4A 40%, #FBDE4A 60%, #D21034 60%, #DC241F 60%);
position: relative; }
.romania {
background: linear-gradient(to right, #002B7F calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #CE1126 calc(100% / 3 * 2)); }
.russia {
background: linear-gradient(to bottom, white calc(100% / 3), #0039A6 calc(100% / 3), #0039A6 calc(100% / 3 * 2), #D52B1E calc(100% / 3 * 2)); }
.rwanda {
background: linear-gradient(to bottom, #00A1DE 50%, #FAD201 50%, #FAD201 75%, #20603D 75%);
position: relative; }
.rwanda:before {
position: absolute;
content: "?";
right: 20px;
box-sizing: border-box;
color: #E5BE01;
font-size: 36px;
top: 10px; }
.rwanda:after {
position: absolute;
content: "";
border-radius: 50%;
height: 13px;
width: 13px;
background: #E5BE01;
border: 1px solid #00A1DE;
top: 23px;
right: 26px; }
.saint-kitts-and-nevis {
background: linear-gradient(145deg, #009E49 35%, #FCD116 35%, #FCD116 40%, black 40%, black 60%, #FCD116 60%, #FCD116 65%, #CE1126 65%);
position: relative; }
.saint-kitts-and-nevis:before, .saint-kitts-and-nevis:after {
position: absolute;
content: "?";
color: white;
font-size: 30px;
transform: rotate(42deg); }
.saint-kitts-and-nevis:before {
right: 40px;
top: 16px; }
.saint-kitts-and-nevis:after {
left: 40px;
top: 62px; }
.saint-lucia {
background: linear-gradient(-45deg, #FCD116 14%, transparent 0) -89px -10px, linear-gradient(45deg, #FCD116 14%, transparent 0) 89px -10px, linear-gradient(-65deg, black 16%, transparent 0) -89px -10px, linear-gradient(65deg, black 16%, transparent 0) 89px -10px, linear-gradient(-65deg, white 18%, transparent 0) -89px -10px, linear-gradient(65deg, white 18%, transparent 0) 89px -10px, #66CCFF; }
.sao-tome-and-principe {
background: linear-gradient(135deg, #D21034 20%, transparent 0) 0 -60px, linear-gradient(45deg, #D21034 20%, transparent 0) 0 -60px, linear-gradient(to bottom, #12AD2B calc(100% / 3), #FFCE00 calc(100% / 3), #FFCE00 calc(100% / 3 * 2), #12AD2B calc(100% / 3 * 2));
background-size: 180px 120px;
position: relative; }
.sao-tome-and-principe:before {
position: absolute;
content: "? ?";
color: black;
font-size: 30px;
right: 16px;
top: 42px; }
.senegal {
background: linear-gradient(to right, #00853F calc(100% / 3), #FDEF42 calc(100% / 3), #FDEF42 calc(100% / 3 * 2), #E31B23 calc(100% / 3 * 2));
position: relative; }
.senegal:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
color: #00853F;
font-size: 36px;
top: 30%; }
.seychelles {
background: linear-gradient(170deg, transparent 79%, #007A3D 55%), linear-gradient(160deg, transparent 65%, white 45%), linear-gradient(141deg, transparent 45%, #D62828 45%), linear-gradient(120deg, transparent 27%, #FCD856 25%), #003F87; }
.sierra-leone {
background: linear-gradient(to bottom, #1EB53A calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #0072C6 calc(100% / 3 * 2)); }
.somalia {
background: #4189DD;
position: relative; }
.somalia:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
color: white;
font-size: 44px;
top: 33px; }
.south-sudan {
background: linear-gradient(146deg, #0F47AF 25%, transparent 0) 0 -60px, linear-gradient(34deg, #0F47AF 25%, transparent 0) 0 -60px, linear-gradient(to bottom, black 30%, white 30%, white 35%, #DA121A 35%, #DA121A 65%, white 65%, white 70%, #078930 70%);
background-size: 180px 120px;
position: relative; }
.south-sudan:before {
position: absolute;
content: "?";
color: #FCDD09;
font-size: 30px;
top: 42px;
left: 18px;
transform: rotate(45deg); }
.sudan {
background: linear-gradient(148deg, #007229 25%, transparent 0) 0 -60px, linear-gradient(33deg, #007229 25%, transparent 0) 0 -60px, linear-gradient(to bottom, #D21034 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2));
background-size: 180px 120px; }
.suriname {
background: linear-gradient(to bottom, #377E3F 20%, white 20%, white 30%, #B40A2D 30%, #B40A2D 70%, white 70%, white 80%, #377E3F 80%);
position: relative; }
.suriname:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
color: #ECC81D;
font-size: 40px;
top: 36px; }
.sweden {
background: linear-gradient(to right, transparent 30%, #FECC00 30%, #FECC00 45%, transparent 0), linear-gradient(to bottom, transparent 38%, #FECC00 38%, #FECC00 59%, transparent 0), #006AA7; }
.switzerland {
background: linear-gradient(to bottom, transparent calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), transparent 0), linear-gradient(to right, transparent calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), transparent 0), #FF0000;
background-size: 80px 80px;
background-repeat: no-repeat;
background-position: 50px 20px; }
.syria {
background: linear-gradient(to bottom, #CE1126 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2));
position: relative; }
.syria:before {
position: absolute;
content: "? ?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
color: #007A3D;
font-size: 26px;
top: 44px; }
.tanzania {
background: linear-gradient(145deg, #1EB53A 40%, #FCD116 40%, #FCD116 43%, black 43%, black 57%, #FCD116 57%, #FCD116 60%, #00A3DD 60%);
position: relative; }
.thailand {
background: linear-gradient(to bottom, #ED1C24 15%, white 15%, white 30%, #241D4F 30%, #241D4F 70%, white 70%, white 85%, #ED1C24 85%); }
.togo {
background: repeating-linear-gradient(to bottom, #006A4E, #006A4E calc(100% / 5), #FFCE00 calc(100% / 5), #FFCE00 calc(100% / 5 * 2));
position: relative; }
.togo:before {
position: absolute;
content: "?";
box-sizing: border-box;
text-align: center;
font-size: 40px;
padding-top: 10px;
color: white;
background: #D21034;
height: 71px;
width: 71px; }
.tonga {
background: #C10000;
position: relative; }
.tonga:before {
position: absolute;
content: "";
width: 50%;
height: 50%;
background: linear-gradient(to bottom, transparent calc(100% / 3), #C10000 calc(100% / 3), #C10000 calc(100% / 3 * 2), transparent 0), linear-gradient(to right, transparent calc(100% / 3), #C10000 calc(100% / 3), #C10000 calc(100% / 3 * 2), transparent 0), white;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 50% 10px; }
.trinidad-and-tobago {
background: linear-gradient(45deg, transparent 40%, white 40%, white 43%, black 43%, black 57%, white 57%, white 60%, transparent 0), #CE1126; }
.tunisia {
background: radial-gradient(60px at 55% 50%, white 35%, transparent 0), radial-gradient(90px at 50% 50%, transparent 30%, white 30%, white 36%, transparent 0), #E70013;
position: relative; }
.tunisia:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
font-size: 30px;
color: #E70013;
text-align: center;
top: 42px;
left: 23px;
transform: rotate(45deg); }
.turkey {
background: radial-gradient(77px at 40% 50%, #E30A17 35%, transparent 0), radial-gradient(90px at 36% 50%, white 30%, white 36%, transparent 0), #E30A17;
position: relative; }
.turkey:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
font-size: 28px;
color: white;
text-align: center;
top: 42px;
left: 28px;
transform: rotate(45deg); }
.ukraine {
background: linear-gradient(to bottom, #005BBB 50%, #FFD500 50%); }
.uae {
background: linear-gradient(to right, #FF0000 30%, transparent 0), linear-gradient(to bottom, #00732F calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2)); }
.the-united-kingdom {
background: #00247D;
background-size: 100px 100px;
position: relative; }
.the-united-kingdom:before {
position: absolute;
content: "";
top: 0;
left: 0;
background: linear-gradient(to bottom, transparent 40%, #CC142B 40%, #CC142B 60%, transparent 60%), linear-gradient(to right, transparent 45%, #CC142B 45%, #CC142B 55%, transparent 55%), linear-gradient(to bottom, transparent 35%, white 35%, white 65%, transparent 65%), linear-gradient(to right, transparent 40%, white 40%, white 60%, transparent 60%), linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -65px 45px, linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 55px -45px, linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -75px -43px, linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 70px 46px, linear-gradient(146deg, transparent 45%, white 45%, white 55%, transparent 55%), linear-gradient(34deg, transparent 45%, white 45%, white 55%, transparent 55%);
width: 180px;
height: 120px;
background-repeat: no-repeat; }
.vietnam {
background: #DA251D;
position: relative; }
.vietnam:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
color: #FFFF00;
font-size: 64px;
top: 20px; }
.western-sahara {
background: radial-gradient(48px at 53% 50%, white 35%, transparent 0), radial-gradient(50px at 50% 50%, #D21034 35%, transparent 0), linear-gradient(135deg, #D21034 20%, transparent 0) 0 -60px, linear-gradient(45deg, #D21034 20%, transparent 0) 0 -60px, linear-gradient(to bottom, black calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #007229 calc(100% / 3 * 2));
background-size: 180px 120px;
position: relative; }
.western-sahara:before {
position: absolute;
content: "?";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
font-size: 20px;
color: #D21034;
top: 48px;
left: 8px; }
.yemen {
background: linear-gradient(to bottom, #CE1126 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2)); }