Single Div Pure CSS Flags are 111 single-element country tags implemented in pure HTML/CSS format.
css country flags, font awesome country flags, flag icon css not working, pure css flags, country flags javascript, html country flags
How to make use of it:
Copy and paste the following CSS styles into your document.
<ul>
<li>
<h2>1</h2>
<div class="flag algeria"></div>
<h3>algeria</h3>
</li>
<li>
<h2>2</h2>
<div class="flag armenia"></div>
<h3>armenia</h3>
</li>
<li>
<h2>3</h2>
<div class="flag austria"></div>
<h3>austria</h3>
</li>
<li>
<h2>4</h2>
<div class="flag azerbaijan"></div>
<h3>azerbaijan</h3>
</li>
<li>
<h2>5</h2>
<div class="flag bahamas"></div>
<h3>bahamas</h3>
</li>
<li>
<h2>6</h2>
<div class="flag bahrain"></div>
<h3>bahrain</h3>
</li>
<li>
<h2>7</h2>
<div class="flag bangladesh"></div>
<h3>bangladesh</h3>
</li>
<li>
<h2>8</h2>
<div class="flag barbados"></div>
<h3>barbados</h3>
</li>
<li>
<h2>9</h2>
<div class="flag belgium"></div>
<h3>belgium</h3>
</li>
<li>
<h2>10</h2>
<div class="flag benin"></div>
<h3>benin</h3>
</li>
<li>
<h2>11</h2>
<div class="flag bolivia"></div>
<h3>bolivia</h3>
</li>
<li>
<h2>12</h2>
<div class="flag botswana"></div>
<h3>botswana</h3>
</li>
<li>
<h2>13</h2>
<div class="flag brazil"></div>
<h3>brazil</h3>
</li>
<li>
<h2>14</h2>
<div class="flag bulgaria"></div>
<h3>bulgaria</h3>
</li>
<li>
<h2>15</h2>
<div class="flag burkina faso"></div>
<h3>burkina faso</h3>
</li>
<li>
<h2>16</h2>
<div class="flag burundi"></div>
<h3>burundi</h3>
</li>
<li>
<h2>17</h2>
<div class="flag cameroon"></div>
<h3>cameroon</h3>
</li>
<li>
<h2>18</h2>
<div class="flag central-african-republic"></div>
<h3>central african republic</h3>
</li>
<li>
<h2>19</h2>
<div class="flag chad"></div>
<h3>chad</h3>
</li>
<li>
<h2>20</h2>
<div class="flag chile"></div>
<h3>chile</h3>
</li>
<li>
<h2>21</h2>
<div class="flag colombia"></div>
<h3>colombia</h3>
</li>
<li>
<h2>22</h2>
<div class="flag comoros"></div>
<h3>comoros</h3>
</li>
<li>
<h2>23</h2>
<div class="flag costa-rica"></div>
<h3>costa rica</h3>
</li>
<li>
<h2>24</h2>
<div class="flag cote-d-ivoire"></div>
<h3>cote d ivoire</h3>
</li>
<li>
<h2>25</h2>
<div class="flag cuba"></div>
<h3>cuba</h3>
</li>
<li>
<h2>26</h2>
<div class="flag czech-republic"></div>
<h3>czech republic</h3>
</li>
<li>
<h2>27</h2>
<div class="flag democratic-republic-of-congo"></div>
<h3>democratic republic of congo</h3>
</li>
<li>
<h2>28</h2>
<div class="flag denmark"></div>
<h3>denmark</h3>
</li>
<li>
<h2>29</h2>
<div class="flag djibouti"></div>
<h3>djibouti</h3>
</li>
<li>
<h2>30</h2>
<div class="flag east-timor"></div>
<h3>east timor</h3>
</li>
<li>
<h2>31</h2>
<div class="flag estonia"></div>
<h3>estonia</h3>
</li>
<li>
<h2>32</h2>
<div class="flag finland"></div>
<h3>finland</h3>
</li>
<li>
<h2>33</h2>
<div class="flag france"></div>
<h3>france</h3>
</li>
<li>
<h2>34</h2>
<div class="flag gabon"></div>
<h3>gabon</h3>
</li>
<li>
<h2>35</h2>
<div class="flag the-gambia"></div>
<h3>the gambia</h3>
</li>
<li>
<h2>36</h2>
<div class="flag germany"></div>
<h3>germany</h3>
</li>
<li>
<h2>37</h2>
<div class="flag ghana"></div>
<h3>ghana</h3>
</li>
<li>
<h2>38</h2>
<div class="flag greece"></div>
<h3>greece</h3>
</li>
<li>
<h2>39</h2>
<div class="flag guinea"></div>
<h3>guinea</h3>
</li>
<li>
<h2>40</h2>
<div class="flag guinea-bissau"></div>
<h3>guinea bissau</h3>
</li>
<li>
<h2>41</h2>
<div class="flag guyana"></div>
<h3>guyana</h3>
</li>
<li>
<h2>42</h2>
<div class="flag hungary"></div>
<h3>hungary</h3>
</li>
<li>
<h2>43</h2>
<div class="flag iceland"></div>
<h3>iceland</h3>
</li>
<li>
<h2>44</h2>
<div class="flag india"></div>
<h3>india</h3>
</li>
<li>
<h2>45</h2>
<div class="flag indonesia"></div>
<h3>indonesia</h3>
</li>
<li>
<h2>46</h2>
<div class="flag iran"></div>
<h3>iran</h3>
</li>
<li>
<h2>47</h2>
<div class="flag iraq"></div>
<h3>iraq</h3>
</li>
<li>
<h2>48</h2>
<div class="flag ireland"></div>
<h3>ireland</h3>
</li>
<li>
<h2>49</h2>
<div class="flag israel"></div>
<h3>israel</h3>
</li>
<li>
<h2>50</h2>
<div class="flag italy"></div>
<h3>italy</h3>
</li>
<li>
<h2>51</h2>
<div class="flag jamaica"></div>
<h3>jamaica</h3>
</li>
<li>
<h2>52</h2>
<div class="flag japan"></div>
<h3>japan</h3>
</li>
<li>
<h2>53</h2>
<div class="flag kuwait"></div>
<h3>kuwait</h3>
</li>
<li>
<h2>54</h2>
<div class="flag laos"></div>
<h3>laos</h3>
</li>
<li>
<h2>55</h2>
<div class="flag latvia"></div>
<h3>latvia</h3>
</li>
<li>
<h2>56</h2>
<div class="flag liberia"></div>
<h3>liberia</h3>
</li>
<li>
<h2>57</h2>
<div class="flag libya"></div>
<h3>libya</h3>
</li>
<li>
<h2>58</h2>
<div class="flag lithuania"></div>
<h3>lithuania</h3>
</li>
<li>
<h2>59</h2>
<div class="flag luxembourg"></div>
<h3>luxembourg</h3>
</li>
<li>
<h2>60</h2>
<div class="flag madagascar"></div>
<h3>madagascar</h3>
</li>
<li>
<h2>61</h2>
<div class="flag malaysia"></div>
<h3>malaysia</h3>
</li>
<li>
<h2>62</h2>
<div class="flag maldives"></div>
<h3>maldives</h3>
</li>
<li>
<h2>63</h2>
<div class="flag mali"></div>
<h3>mali</h3>
</li>
<li>
<h2>64</h2>
<div class="flag mauritania"></div>
<h3>mauritania</h3>
</li>
<li>
<h2>65</h2>
<div class="flag mauritius"></div>
<h3>mauritius</h3>
</li>
<li>
<h2>66</h2>
<div class="flag monaco"></div>
<h3>monaco</h3>
</li>
<li>
<h2>67</h2>
<div class="flag myanmar"></div>
<h3>myanmar</h3>
</li>
<li>
<h2>68</h2>
<div class="flag namibia"></div>
<h3>namibia</h3>
</li>
<li>
<h2>69</h2>
<div class="flag nauru"></div>
<h3>nauru</h3>
</li>
<li>
<h2>70</h2>
<div class="flag nepal"></div>
<h3>nepal</h3>
</li>
<li>
<h2>71</h2>
<div class="flag the-netherlands"></div>
<h3>the netherlands</h3>
</li>
<li>
<h2>72</h2>
<div class="flag niger"></div>
<h3>niger</h3>
</li>
<li>
<h2>73</h2>
<div class="flag nigeria"></div>
<h3>nigeria</h3>
</li>
<li>
<h2>74</h2>
<div class="flag north-korea"></div>
<h3>north korea</h3>
</li>
<li>
<h2>75</h2>
<div class="flag norway"></div>
<h3>norway</h3>
</li>
<li>
<h2>76</h2>
<div class="flag pakistan"></div>
<h3>pakistan</h3>
</li>
<li>
<h2>77</h2>
<div class="flag palau"></div>
<h3>palau</h3>
</li>
<li>
<h2>78</h2>
<div class="flag panama"></div>
<h3>panama</h3>
</li>
<li>
<h2>79</h2>
<div class="flag peru"></div>
<h3>peru</h3>
</li>
<li>
<h2>80</h2>
<div class="flag phillippines"></div>
<h3>phillippines</h3>
</li>
<li>
<h2>81</h2>
<div class="flag poland"></div>
<h3>poland</h3>
</li>
<li>
<h2>82</h2>
<div class="flag qatar"></div>
<h3>qatar</h3>
</li>
<li>
<h2>83</h2>
<div class="flag republic-of-china"></div>
<h3>republic of china</h3>
</li>
<li>
<h2>84</h2>
<div class="flag republic-of-congo"></div>
<h3>republic of congo</h3>
</li>
<li>
<h2>85</h2>
<div class="flag romania"></div>
<h3>romania</h3>
</li>
<li>
<h2>86</h2>
<div class="flag russia"></div>
<h3>russia</h3>
</li>
<li>
<h2>87</h2>
<div class="flag rwanda"></div>
<h3>rwanda</h3>
</li>
<li>
<h2>88</h2>
<div class="flag saint-kitts-and-nevis"></div>
<h3>saint kitts and nevis</h3>
</li>
<li>
<h2>89</h2>
<div class="flag saint-lucia"></div>
<h3>saint lucia</h3>
</li>
<li>
<h2>90</h2>
<div class="flag sao-tome-and-principe"></div>
<h3>sao tome and principe</h3>
</li>
<li>
<h2>91</h2>
<div class="flag senegal"></div>
<h3>senegal</h3>
</li>
<li>
<h2>92</h2>
<div class="flag seychelles"></div>
<h3>seychelles</h3>
</li>
<li>
<h2>93</h2>
<div class="flag sierra-leone"></div>
<h3>sierra leone</h3>
</li>
<li>
<h2>94</h2>
<div class="flag somalia"></div>
<h3>somalia</h3>
</li>
<li>
<h2>95</h2>
<div class="flag south-sudan"></div>
<h3>south sudan</h3>
</li>
<li>
<h2>96</h2>
<div class="flag sudan"></div>
<h3>sudan</h3>
</li>
<li>
<h2>97</h2>
<div class="flag suriname"></div>
<h3>suriname</h3>
</li>
<li>
<h2>98</h2>
<div class="flag sweden"></div>
<h3>sweden</h3>
</li>
<li>
<h2>99</h2>
<div class="flag switzerland"></div>
<h3>switzerland</h3>
</li>
<li>
<h2>100</h2>
<div class="flag syria"></div>
<h3>syria</h3>
</li>
<li>
<h2>101</h2>
<div class="flag tanzania"></div>
<h3>tanzania</h3>
</li>
<li>
<h2>102</h2>
<div class="flag thailand"></div>
<h3>thailand</h3>
</li>
<li>
<h2>103</h2>
<div class="flag togo"></div>
<h3>togo</h3>
</li>
<li>
<h2>104</h2>
<div class="flag tonga"></div>
<h3>tonga</h3>
</li>
<li>
<h2>105</h2>
<div class="flag trinidad-and-tobago"></div>
<h3>trinidad and tobago</h3>
</li>
<li>
<h2>106</h2>
<div class="flag tunisia"></div>
<h3>tunisia</h3>
</li>
<li>
<h2>107</h2>
<div class="flag turkey"></div>
<h3>turkey</h3>
</li>
<li>
<h2>108</h2>
<div class="flag ukraine"></div>
<h3>ukraine</h3>
</li>
<li>
<h2>109</h2>
<div class="flag uae"></div>
<h3>uae</h3>
</li>
<li>
<h2>110</h2>
<div class="flag the-united-kingdom"></div>
<h3>the united kingdom</h3>
</li>
<li>
<h2>111</h2>
<div class="flag vietnam"></div>
<h3>vietnam</h3>
</li>
<li>
<h2>112</h2>
<div class="flag western-sahara"></div>
<h3>western sahara</h3>
</li>
<li>
<h2>113</h2>
<div class="flag yemen"></div>
<h3>yemen</h3>
</li>
</ul>@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Cairo");
* {
box-sizing: border-box;
}
.container,
body,
li,
ul {
display: flex;
align-items: center;
justify-content: center;
}
body {
font-family: sans-serif;
width: 100%;
background: #eee;
flex-direction: column;
}
li,
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul {
flex-wrap: wrap;
margin-top: 20px;
}
li {
margin: 0.5em;
padding: 0.5em 1em;
background: #fff;
}
.container,
li {
flex-direction: column;
}
.text {
width: 900px;
}
.flag {
width: 180px;
height: 120px;
overflow: hidden;
border: 1px solid #efefef;
}
h1 {
font-weight: 400;
color: #639;
font-size: 2em;
}
h2 {
font-size: 0.75em;
color: #d3d3d3;
}
h2,
h3 {
font-weight: 700;
}
h3 {
text-align: center;
font-size: 0.65em;
text-transform: uppercase;
}
a,
h3 {
color: #708090;
}
a {
font-size: 1em;
}
.algeria {
background: linear-gradient(90deg, #006232, #006232 50%, #fff 0, #fff);
position: relative;
}
.algeria:before {
content: "";
border-radius: 50%;
left: 0;
right: 0;
width: 50px;
height: 50px;
background: transparent;
box-shadow: -9px 0 0 8px #d21034;
top: 35px;
right: -10px;
}
.algeria:after,
.algeria:before {
position: absolute;
margin-left: auto;
margin-right: auto;
}
.algeria:after {
content: "★";
left: 0;
right: 0;
color: #d21034;
font-size: 2em;
transform: rotate(20deg);
top: calc(50% - 12px);
left: calc(50% - 5px);
}
.armenia {
background: linear-gradient(
180deg,
#d90012,
#d90011 33.33333%,
#0033a0 33.33333%,
#0033a0 66.66667%,
#f2a800 66.66667%,
#f2a800
);
}
.austria {
background: linear-gradient(
180deg,
#ed2939,
#ed2939 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#ed2939 66.66667%,
#ed2939
);
}
.azerbaijan {
background: linear-gradient(
180deg,
#00b5e2,
#00b5e2 33.33333%,
#ef3340 33.33333%,
#ef3340 66.66667%,
#509e2f 66.66667%,
#509e2f
);
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 #fff;
}
.azerbaijan:after {
position: absolute;
content: "✸";
color: #fff;
font-size: 24px;
transform: rotate(22deg);
top: calc(50% - 13px);
left: 52%;
}
.bahamas {
background: linear-gradient(146deg, #000 25%, transparent 0) 0 -60px,
linear-gradient(34deg, #000 25%, transparent 0) 0 -60px,
linear-gradient(
180deg,
#00abc9,
#00abc9 33.33333%,
#fae042 33.33333%,
#fae042 66.66667%,
#00abc9 66.66667%,
#00abc9
);
background-size: 180px 120px;
}
.bahrain {
background: linear-gradient(90deg, #fff, #fff 25%, #ce1126 0, #ce1126);
position: relative;
}
.bahrain:before {
position: absolute;
content: "";
width: 24px;
height: 100%;
background: linear-gradient(154deg, #fff 32%, transparent 0) 0 12px,
linear-gradient(24deg, #fff 32%, transparent 0) 0 36px;
background-size: 24px 24px;
left: 44px;
top: 0;
}
.bangladesh {
background: radial-gradient(
110px at 40% 50%,
#f42a41 0,
#f42a41 35%,
transparent 0,
transparent 100%
),
#006a4e;
}
.barbados {
background: linear-gradient(
90deg,
#00267f,
#00267f 33.33333%,
#ffc726 33.33333%,
#ffc726 66.66667%,
#00267f 66.66667%,
#00267f
);
position: relative;
}
.barbados:before {
position: absolute;
content: "♆";
font-size: 3em;
left: calc(50% - 18px);
top: 26px;
}
.belgium {
background: linear-gradient(
90deg,
#000,
#000 33.33333%,
#fae042 33.33333%,
#fae042 66.66667%,
#ed2939 66.66667%,
#ed2939
);
}
.benin {
background: linear-gradient(
90deg,
#008751,
#008751 40%,
transparent 0,
transparent
),
linear-gradient(180deg, #fcd116, #fcd116 50%, #e8112d 0, #e8112d);
}
.bolivia {
background: linear-gradient(
180deg,
#d52b1e,
#d52b1e 33.33333%,
#ffe000 33.33333%,
#ffe000 66.66667%,
#007934 66.66667%,
#007934
);
}
.botswana {
background: linear-gradient(
0deg,
#75aadb,
#75aadb 35%,
#fff 0,
#fff 40%,
#000 0,
#000 60%,
#fff 0,
#fff 65%,
#75aadb 0,
#75aadb
);
}
.brazil {
background: linear-gradient(149deg, #009b3a 30%, transparent 0),
linear-gradient(-149deg, #009b3a 30%, transparent 0),
linear-gradient(-30deg, #009b3a 30%, transparent 0),
linear-gradient(30deg, #009b3a 30%, transparent 0),
radial-gradient(
90px at 50% 50%,
transparent 0,
transparent 35%,
#fedf00 0,
#fedf00 100%
),
radial-gradient(
180px at 40% 96%,
transparent 0,
transparent 35%,
#fff 0,
#fff 39%,
transparent 0,
transparent 100%
),
#002776;
overflow: hidden;
}
.bulgaria {
background: linear-gradient(
180deg,
#fff,
#fff 33.33333%,
#00966e 33.33333%,
#00966e 66.66667%,
#d62612 66.66667%,
#d62612
);
}
.burkina {
background: linear-gradient(180deg, #ef2b2d, #ef2b2d 50%, #009e49 0, #009e49);
position: relative;
}
.burkina:after {
position: absolute;
content: "★";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
top: calc(50% - 26px);
font-size: 36px;
color: #fcd116;
}
.burundi {
background: radial-gradient(
100px at 50% 50%,
#fff 0,
#fff 35%,
transparent 0,
transparent 100%
),
linear-gradient(146deg, #ce1126 20%, transparent 0) 90px -118px,
linear-gradient(-146deg, #ce1126 20%, transparent 0) 90px -118px,
linear-gradient(-34deg, #ce1126 20%, transparent 0) 90px 118px,
linear-gradient(34deg, #ce1126 20%, transparent 0) 90px 118px,
linear-gradient(146deg, #1eb53a 20%, transparent 0) 0 -60px,
linear-gradient(34deg, #1eb53a 20%, transparent 0) 0 -60px,
linear-gradient(-146deg, #1eb53a 20%, transparent 0) 180px -60px,
linear-gradient(-34deg, #1eb53a 20%, transparent 0) 180px -60px, #fff;
position: relative;
}
.burundi:before {
content: "✶";
top: 36px;
}
.burundi:after,
.burundi:before {
position: absolute;
font-size: 18px;
-webkit-text-stroke: 0.5px #1eb53a;
width: 180px;
height: 120px;
text-align: center;
color: #ce1126;
}
.burundi:after {
content: "✶ ✶";
top: 60px;
}
.cameroon {
background: linear-gradient(
90deg,
#007a5e,
#007a5e 33.33333%,
#ce1126 33.33333%,
#ce1126 66.66667%,
#fcd116 66.66667%,
#fcd116
);
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: 35%;
}
.central-african-republic {
background: linear-gradient(
90deg,
transparent 0,
transparent 42%,
#d21034 0,
#d21034 58%,
transparent 0,
transparent
),
linear-gradient(
180deg,
#003082,
#003082 25%,
#fff 0,
#fff 50%,
#289728 0,
#289728 75%,
#ffce00 0,
#ffce00
);
position: relative;
}
.central-african-republic:before {
position: absolute;
content: "★";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
color: #ffce00;
font-size: 22px;
left: 15px;
}
.chad {
background: linear-gradient(
90deg,
#002664,
#002664 33.33333%,
#fecb00 33.33333%,
#fecb00 66.66667%,
#c60c30 66.66667%,
#c60c30
);
}
.chile {
background: linear-gradient(180deg, #fff, #fff 50%, #d52b1e 0, #d52b1e);
position: relative;
}
.chile:after {
position: absolute;
content: "★";
box-sizing: border-box;
color: #fff;
font-size: 26px;
text-align: center;
background: #0039a6;
height: 60px;
width: 60px;
left: 0;
padding-top: 10px;
}
.colombia {
background: linear-gradient(
180deg,
#fcd116 0,
#fcd116 50%,
#003893 0,
#003893 75%,
#ce1126 0,
#ce1126
);
}
.comoros {
background: linear-gradient(146deg, #3d8e33 25%, transparent 0) 0 -60px,
linear-gradient(34deg, #3d8e33 25%, transparent 0) 0 -60px,
linear-gradient(
180deg,
#ffc61e 0,
#ffc61e 25%,
#fff 0,
#fff 50%,
#ce1025 0,
#ce1126 75%,
#3a75c4 0,
#3a75c4
);
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 #fff;
}
.comoros:after {
position: absolute;
content: "★ ★ ★ ★";
color: #fff;
width: 8px;
font-size: 8px;
top: 40px;
left: 34px;
}
.costa-rica {
background: linear-gradient(
180deg,
#002a7f 15%,
#fff 0,
#fff 35%,
#ce1126 0,
#ce1126 65%,
#fff 0,
#fff 85%,
#002b7f 0,
#002b7f
);
}
.cote-d-ivoire {
background: linear-gradient(
90deg,
#f77f00 33.33333%,
#fff 33.33333%,
66.66667%,
#009e60 66.66667%,
#009e60
);
}
.cuba {
background: linear-gradient(146deg, #cf142b 25%, transparent 0) 0 -60px,
linear-gradient(34deg, #cf142b 25%, transparent 0) 0 -60px,
linear-gradient(
180deg,
#002a8f 20%,
#fff 0,
#fff 40%,
#002a8f 0,
#002a8f 60%,
#fff 0,
#fff 80%,
#002a8f 0,
#002a8f
);
background-size: 180px 120px;
position: relative;
}
.cuba:before {
position: absolute;
content: "★";
color: #fff;
font-size: 24px;
top: 42px;
left: 20px;
}
.czech-republic {
background: linear-gradient(146deg, #11457e 25%, transparent 0) 0 -60px,
linear-gradient(34deg, #11457e 25%, transparent 0) 0 -60px,
linear-gradient(180deg, #fff 50%, #d7141a 0);
background-size: 180px 120px;
}
.democratic-republic-of-congo {
background: linear-gradient(
146deg,
#007fff,
#007fff 45%,
#f7d618 0,
#f7d618 50%,
#ce1021 0,
#ce1021 60%,
#f7d618 0,
#f7d618 65%,
#007fff 0,
#007fff
);
position: relative;
}
.democratic-republic-of-congo:before {
position: absolute;
content: "★";
color: #f7d618;
font-size: 36px;
top: 10px;
left: 20px;
}
.denmark {
background: linear-gradient(
180deg,
transparent 40%,
#fff 0,
#fff 55%,
transparent 0,
transparent
),
linear-gradient(
90deg,
transparent 30%,
#fff 0,
#fff 40%,
transparent 0,
transparent
),
#c60c30;
}
.djibouti {
background: linear-gradient(146deg, #fff 25%, transparent 0) 0 -60px,
linear-gradient(34deg, #fff 25%, transparent 0) 0 -60px,
linear-gradient(180deg, #6ab2e7 50%, #12ad2b 0);
background-size: 180px 120px;
position: relative;
}
.djibouti:before {
position: absolute;
content: "★";
color: #d7141a;
font-size: 30px;
top: 40px;
left: 16px;
}
.east-timor {
background: linear-gradient(145deg, #000 25%, transparent 0) 0 -60px,
linear-gradient(34deg, #000 25%, transparent 0) 0 -60px,
linear-gradient(155deg, #ffc726 30%, transparent 0) 0 -60px,
linear-gradient(25deg, #ffc726 30%, transparent 0) 0 -60px, #dc241f;
position: relative;
}
.east-timor:before {
position: absolute;
content: "★";
color: #fff;
font-size: 36px;
top: 36px;
left: 16px;
transform: rotate(115deg);
}
.estonia {
background: linear-gradient(
180deg,
#4891d9 33.33333%,
#000 33.33333%,
#000 66.66667%,
#fff 66.66667%
);
}
.finland {
background: linear-gradient(
180deg,
transparent 35%,
#003580 0,
#003580 60%,
transparent 0
),
linear-gradient(
90deg,
transparent 30%,
#003580 0,
#003480 45%,
transparent 0
),
#fff;
}
.france {
background: linear-gradient(
90deg,
#002395 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#ed2939 66.66667%
);
}
.gabon {
background: linear-gradient(
180deg,
#009e60 33.33333%,
#fcd116 33.33333%,
#fcd116 66.66667%,
#3a75c4 66.66667%
);
}
.the-gambia {
background: linear-gradient(
180deg,
#ce1126 30%,
#fff 0,
#fff 35%,
#0c1c8c 0,
#0c1c8c 65%,
#fff 0,
#fff 70%,
#3a7728 0
);
}
.germany {
background: linear-gradient(
180deg,
#000 33.33333%,
#d00 33.33333%,
#d00 66.66667%,
#ffce00 66.66667%
);
}
.ghana {
background: linear-gradient(
180deg,
#ce1126 33.33333%,
#fcd116 33.33333%,
#fcd116 66.66667%,
#006b3f 66.66667%
);
position: relative;
}
.ghana:before {
position: absolute;
content: "★";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
color: #000;
text-align: center;
font-size: 40px;
top: calc(50% - 27px);
}
.greece {
background-image: repeating-linear-gradient(
180deg,
#0d5eaf,
#0d5eaf 13.33333px,
#fff 13.33333px,
#fff 26.66667px
);
position: relative;
}
.greece:before {
position: absolute;
content: "";
width: 66.66667px;
height: 66.66667px;
background: linear-gradient(
180deg,
transparent 26.66667px,
#fff 26.66667px,
#fff 40px,
transparent 40px
),
linear-gradient(
90deg,
transparent 26.66667px,
#fff 26.66667px,
#fff 40px,
transparent 40px
),
#0d5eaf;
}
.guinea {
background: linear-gradient(
90deg,
#ce1126 33.33333%,
#fcd116 33.33333%,
#fcd116 66.66667%,
#009460 66.66667%
);
}
.guinea-bissau {
background: linear-gradient(90deg, #ce1126 35%, transparent 0),
linear-gradient(180deg, #fcd116 50%, #009e49 0);
position: relative;
}
.guinea-bissau:before {
position: absolute;
content: "★";
color: #000;
font-size: 40px;
top: calc(50% - 27px);
left: 10px;
}
.guyana {
background: linear-gradient(149deg, #ce1126 24%, transparent 0) 0 -60px,
linear-gradient(31deg, #ce1126 24%, transparent 0) 0 -60px,
linear-gradient(149deg, #000 26%, transparent 0) 0 -60px,
linear-gradient(31deg, #000 26%, transparent 0) 0 -60px,
linear-gradient(160deg, #fcd116 32%, transparent 0) 0 -60px,
linear-gradient(20deg, #fcd116 32%, transparent 0) 0 -60px,
linear-gradient(161deg, #fff 34%, transparent 0) 0 -60px,
linear-gradient(19deg, #fff 34%, transparent 0) 0 -60px, #009e49;
}
.hungary {
background: linear-gradient(
180deg,
#cd2a3e 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#436f4d 66.66667%
);
}
.iceland {
background: linear-gradient(
180deg,
transparent 43%,
#d72828 0,
#d72828 54%,
transparent 0
),
linear-gradient(
90deg,
transparent 34%,
#d72828 0,
#d72828 41%,
transparent 0
),
linear-gradient(90deg, transparent 30%, #fff 0, #fff 45%, transparent 0),
linear-gradient(180deg, transparent 38%, #fff 0, #fff 59%, transparent 0),
#003897;
}
.india {
background: radial-gradient(
circle,
transparent 16.66667%,
navy 19.66667%,
transparent 19.66667%
),
linear-gradient(
180deg,
#f93 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#138808 66.66667%
);
position: relative;
}
.india:before {
position: absolute;
padding: 0;
content: "✺";
font-size: 48px;
line-height: 42px;
text-align: center;
font-weight: 100;
height: 33.33333%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: navy;
}
.indonesia {
background: linear-gradient(180deg, #ce1126 50%, #fff 0);
}
.iran {
background: linear-gradient(
180deg,
#239f40 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#da0000 66.66667%
);
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: 700;
color: #da0000;
top: 22%;
}
.iraq {
background: linear-gradient(
180deg,
#ce1126 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#000 66.66667%
);
position: relative;
}
.iraq:before {
position: absolute;
content: "الله أكبر";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
font-family: Cairo, sans-serif;
font-size: 20px;
text-align: center;
font-weight: 700;
color: #449d71;
top: 36%;
}
.ireland {
background: linear-gradient(
90deg,
#169b62 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#ff883e 66.66667%
);
}
.israel {
background: linear-gradient(
180deg,
transparent 15%,
#0038b8 0,
#0038b8 30%,
transparent 0,
transparent 70%,
#0038b8 0,
#0038b8 85%,
transparent 0
),
#fff;
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: 700;
-webkit-text-stroke: 1px #0038b8;
color: #0038b8;
}
.italy {
background: linear-gradient(
90deg,
#009246 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#ce2b37 66.66667%
);
}
.jamaica {
background: linear-gradient(146deg, #009b3a 20%, transparent 0) 90px -118px,
linear-gradient(-146deg, #009b3a 20%, transparent 0) 90px -118px,
linear-gradient(-34deg, #009b3a 20%, transparent 0) 90px 118px,
linear-gradient(34deg, #009b3a 20%, transparent 0) 90px 118px,
linear-gradient(146deg, #000 20%, transparent 0) 0 -60px,
linear-gradient(34deg, #000 20%, transparent 0) 0 -60px,
linear-gradient(-146deg, #000 20%, transparent 0) 180px -60px,
linear-gradient(-34deg, #000 20%, transparent 0) 180px -60px, #fed100;
}
.japan {
background: radial-gradient(
100px at 50% 50%,
#bc002d 0,
#bc002d 35%,
transparent 0,
transparent 100%
),
#fff;
}
.kuwait {
background: #fff;
border-left: 50px solid #000;
border-top: 35px solid #007a3d;
border-bottom: 35px solid #ce1126;
}
.laos {
background: radial-gradient(
70px at 50% 50%,
#fff 0,
#fff 35%,
transparent 0,
transparent 100%
),
linear-gradient(180deg, #ce1126 25%, #002868 0, #002868 75%, #ce1126 0);
}
.latvia {
background: linear-gradient(180deg, #9e3039 40%, #fff 0, #fff 60%, #9e3039 0);
}
.liberia {
background: repeating-linear-gradient(
180deg,
#bf0a30,
#bf0a30 10.90909px,
#fff 10.9090909091px,
#fff 21.8181818182px
);
position: relative;
}
.liberia:before {
position: absolute;
content: "★";
color: #fff;
font-size: 24px;
box-sizing: border-box;
background: #002868;
text-align: center;
padding-top: 10px;
width: 54.54545px;
height: 54.54545px;
}
.libya {
background: radial-gradient(
45px at 52% 50%,
#000 0,
#000 35%,
transparent 0,
transparent 100%
),
radial-gradient(
50px at 50% 50%,
#fff 0,
#fff 35%,
transparent 0,
transparent 100%
),
linear-gradient(180deg, #e70013 25%, #000 0, #000 75%, #239e46 0);
position: relative;
}
.libya:before {
position: absolute;
content: "★";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
color: #fff;
text-align: center;
top: 40%;
left: 20%;
transform: rotate(45deg);
}
.lithuania {
background: linear-gradient(
180deg,
#fdb913 33.33333%,
#006a44 33.33333%,
#006a44 66.66667%,
#c1272d 66.66667%
);
}
.luxembourg {
background: linear-gradient(
180deg,
#ed2939 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#00a1de 66.66667%
);
}
.madagascar {
background: linear-gradient(90deg, #fff 30%, transparent 0),
linear-gradient(180deg, #fc3d32 50%, #007e3a 0);
}
.malaysia {
background: repeating-linear-gradient(
180deg,
#bf0a30,
#bf0a30 9.23077px,
#fff 9.2307692308px,
#fff 18.4615384615px
);
position: relative;
}
.malaysia:before {
position: absolute;
content: "✹";
color: #fc0;
font-size: 48px;
box-sizing: border-box;
background: radial-gradient(
65px at 50% 50%,
#010066 0,
#010066 35%,
transparent 0,
transparent 100%
),
radial-gradient(
75px at 42% 50%,
#fc0 0,
#fc0 35%,
transparent 0,
transparent 100%
),
#010066;
text-align: center;
padding-top: 5px;
padding-left: 36px;
width: 90px;
height: 64.61538px;
}
.maldives {
border: 30px solid #d21034;
background: radial-gradient(
55px at 55% 50%,
#007e3a 0,
#007e3a 35%,
transparent 0,
transparent 100%
),
radial-gradient(
60px at 50% 50%,
#fff 0,
#fff 35%,
transparent 0,
transparent 100%
),
#007e3a;
}
.mali {
background: linear-gradient(
90deg,
#14b53a 33.33333%,
#fcd116 33.33333%,
#fcd116 66.66667%,
#ce1126 66.66667%
);
}
.mauritania {
background: radial-gradient(
120px at 50% 30%,
#006233 0,
#006233 35%,
transparent 0,
transparent 100%
),
radial-gradient(
120px at 50% 40%,
#ffc400 0,
#ffc400 35%,
transparent 0,
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(
180deg,
#ea2839 25%,
#1a206d 0,
#1a206d 50%,
#ffd500 0,
#ffd500 75%,
#00a551 0
);
}
.monaco {
background: linear-gradient(180deg, #ce1126 50%, #fff 0);
}
.myanmar {
background: linear-gradient(
180deg,
#fecb00 33.33333%,
#34b233 33.33333%,
#34b233 66.66667%,
#ea2839 66.66667%
);
position: relative;
}
.myanmar:before {
position: absolute;
content: "★";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
color: #fff;
font-size: 64px;
text-align: center;
top: 10px;
}
.namibia {
background: linear-gradient(
146deg,
#003580 45%,
#fff 0,
#fff 50%,
#d21034 0,
#d21034 60%,
#fff 0,
#fff 65%,
#009543 0
);
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(
180deg,
transparent 45%,
#ffc61e 0,
#ffc61e 55%,
transparent 0
),
#002b7f;
position: relative;
}
.nauru:before {
position: absolute;
content: "✹";
color: #fff;
font-size: 44px;
left: 30px;
top: 60px;
}
.nepal {
background: radial-gradient(
44px at 16% 34%,
#dc1038 0,
#dc143c 35%,
transparent 0,
transparent 100%
),
radial-gradient(
44px at 16% 39%,
#fff 0,
#fff 35%,
transparent 0,
transparent 100%
),
linear-gradient(40deg, #dc143c 30%, transparent 0) 4px -6px,
linear-gradient(33deg, #dc143c 25%, transparent 0) 4px -54px,
linear-gradient(40deg, #003893 36%, transparent 0),
linear-gradient(33deg, #003893 30%, transparent 0) 0 -50px;
background-size: 180px 120px;
position: relative;
}
.nepal:before {
font-size: 48px;
bottom: 4px;
left: 10px;
}
.nepal:after,
.nepal:before {
position: absolute;
content: "✹";
color: #fff;
}
.nepal:after {
font-size: 28px;
top: 36px;
left: 18px;
}
.the-netherlands {
background: linear-gradient(
180deg,
#ae1c28 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#21468b 66.66667%
);
}
.new-zealand {
background: #00247d;
background-size: 100px 100px;
position: relative;
}
.new-zealand:before {
position: absolute;
content: "";
top: 0;
left: 0;
background: linear-gradient(
180deg,
transparent 40%,
#cc142b 0,
#cc142b 60%,
transparent 0
),
linear-gradient(
90deg,
transparent 45%,
#cc142b 0,
#cc142b 55%,
transparent 0
),
linear-gradient(180deg, transparent 35%, #fff 0, #fff 65%, transparent 0),
linear-gradient(90deg, transparent 40%, #fff 0, #fff 60%, transparent 0),
linear-gradient(
146deg,
transparent 50%,
#cc142b 0,
#cc142b 53%,
transparent 0
) -45px 31px,
linear-gradient(
146deg,
transparent 50%,
#cc142b 0,
#cc142b 53%,
transparent 0
)
46px -35px,
linear-gradient(
34deg,
transparent 50%,
#cc142b 0,
#cc142b 53%,
transparent 0
) -51px -31px,
linear-gradient(
34deg,
transparent 50%,
#cc142b 0,
#cc142b 53%,
transparent 0
)
48px 32px,
linear-gradient(146deg, transparent 45%, #fff 0, #fff 55%, transparent 0),
linear-gradient(34deg, transparent 45%, #fff 0, #fff 55%, transparent 0);
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 0,
transparent 100%
),
linear-gradient(
180deg,
#e05206 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#0db02b 66.66667%
);
}
.nigeria {
background: linear-gradient(
90deg,
#008751 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#008751 66.66667%
);
}
.north-korea {
background: radial-gradient(
80px at 35% 50%,
#fff,
#fff 35%,
transparent 0,
transparent 100%
),
linear-gradient(
180deg,
#024fa2 15%,
#fff 0,
#fff 20%,
#ed1c27 0,
#ed1c27 80%,
#fff 0,
#fff 85%,
#024fa2 0
);
position: relative;
}
.north-korea:before {
position: absolute;
content: "★";
color: #ed1c27;
font-size: 48px;
left: 38px;
top: 23px;
}
.norway {
background: linear-gradient(
180deg,
transparent 43%,
#002868 0,
#002868 54%,
transparent 0
),
linear-gradient(
90deg,
transparent 28%,
#002868 0,
#002868 37%,
transparent 0
),
linear-gradient(90deg, transparent 25%, #fff 0, #fff 40%, transparent 0),
linear-gradient(180deg, transparent 38%, #fff 0, #fff 59%, transparent 0),
#ef2b2d;
}
.pakistan {
background: radial-gradient(
90px at 71% 42%,
#01411c,
#01411c 35%,
transparent 0,
transparent 100%
),
radial-gradient(
100px at 65% 50%,
#fff,
#fff 35%,
transparent 0,
transparent 100%
),
linear-gradient(90deg, #fff 30%, #01411c 0);
position: relative;
}
.pakistan:before {
position: absolute;
content: "★";
color: #fff;
transform: rotate(40deg);
font-size: 24px;
right: 30px;
top: 25px;
}
.palau {
background: radial-gradient(
100px at 40% 50%,
#ffde00,
#ffde00 35%,
transparent 0,
transparent 100%
),
#4aadd6;
}
.panama {
background: linear-gradient(90deg, #005293 50%, transparent 0),
linear-gradient(#d21034 50%, transparent 0), #fff;
position: relative;
}
.panama:after,
.panama:before {
position: absolute;
content: "★";
box-sizing: border-box;
background: #fff;
font-size: 32px;
padding-left: 15%;
padding-top: 4%;
width: 89px;
height: 59px;
}
.panama:before {
color: #005293;
}
.panama:after {
right: 0;
bottom: 0;
color: #d21034;
}
.peru {
background: linear-gradient(
90deg,
#d91023 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#d91023 66.66667%
);
}
.phillippines {
background: linear-gradient(146deg, #fff 25%, transparent 0) 0 -60px,
linear-gradient(34deg, #fff 25%, transparent 0) 0 -60px,
linear-gradient(180deg, #0035a9 50%, #d00922 0);
background-size: 180px 120px;
position: relative;
}
.phillippines:before {
position: absolute;
content: "☀";
color: orange;
font-size: 2.25em;
top: 0;
bottom: 0;
margin: auto 0;
left: 5%;
height: 1em;
}
.poland {
background: linear-gradient(180deg, #fff 50%, #dc143c 0);
}
.qatar {
background: linear-gradient(90deg, #fff 25%, #8d1b3d 0);
position: relative;
}
.qatar:before {
position: absolute;
content: "";
width: 20px;
height: 100%;
background: linear-gradient(160deg, #fff 30%, transparent 0) 0 7px,
linear-gradient(20deg, #fff 30%, transparent 0) 0 7px;
background-size: 20px 13.18681px;
left: 44px;
top: 0;
}
.republic-of-china {
background: #fe0000;
position: relative;
}
.republic-of-china:before {
position: absolute;
content: "✹";
box-sizing: border-box;
color: #fff;
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: #fff;
border: 2px solid #000095;
top: 20px;
left: 30px;
}
.republic-of-congo {
background: linear-gradient(
135deg,
#009543 40%,
#fbde4a 0,
#fbde4a 60%,
#d21034 0,
#dc241f 0
);
position: relative;
}
.romania {
background: linear-gradient(
90deg,
#002b7f 33.33333%,
#fcd116 33.33333%,
#fcd116 66.66667%,
#ce1126 66.66667%
);
}
.russia {
background: linear-gradient(
180deg,
#fff 33.33333%,
#0039a6 33.33333%,
#0039a6 66.66667%,
#d52b1e 66.66667%
);
}
.rwanda {
background: linear-gradient(
180deg,
#00a1de 50%,
#fad201 0,
#fad201 75%,
#20603d 0
);
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 0,
#fcd116 40%,
#000 0,
#000 60%,
#fcd116 0,
#fcd116 65%,
#ce1126 0
);
position: relative;
}
.saint-kitts-and-nevis:after,
.saint-kitts-and-nevis:before {
position: absolute;
content: "★";
color: #fff;
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, #000 16%, transparent 0) -89px -10px,
linear-gradient(65deg, #000 16%, transparent 0) 89px -10px,
linear-gradient(-65deg, #fff 18%, transparent 0) -89px -10px,
linear-gradient(65deg, #fff 18%, transparent 0) 89px -10px, #6cf;
}
.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(
180deg,
#12ad2b 33.33333%,
#ffce00 33.33333%,
#ffce00 66.66667%,
#12ad2b 66.66667%
);
background-size: 180px 120px;
position: relative;
}
.sao-tome-and-principe:before {
position: absolute;
content: "★ ★";
color: #000;
font-size: 30px;
right: 12px;
top: 38px;
}
.senegal {
background: linear-gradient(
90deg,
#00853f 33.33333%,
#fdef42 33.33333%,
#fdef42 66.66667%,
#e31b23 66.66667%
);
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 0),
linear-gradient(160deg, transparent 65%, #fff 0),
linear-gradient(141deg, transparent 45%, #d62828 0),
linear-gradient(120deg, transparent 27%, #fcd856 0), #003f87;
}
.sierra-leone {
background: linear-gradient(
180deg,
#1eb53a 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#0072c6 66.66667%
);
}
.somalia {
background: #4189dd;
position: relative;
}
.somalia:before {
position: absolute;
content: "★";
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
text-align: center;
color: #fff;
font-size: 44px;
top: 24px;
}
.south-sudan {
background: linear-gradient(146deg, #0f47af 25%, transparent 0) 0 -60px,
linear-gradient(34deg, #0f47af 25%, transparent 0) 0 -60px,
linear-gradient(
180deg,
#000 30%,
#fff 0,
#fff 35%,
#da121a 0,
#da121a 65%,
#fff 0,
#fff 70%,
#078930 0
);
background-size: 180px 120px;
position: relative;
}
.south-sudan:before {
position: absolute;
content: "★";
color: #fcdd09;
font-size: 30px;
top: 38px;
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(
180deg,
#d21034 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#000 66.66667%
);
background-size: 180px 120px;
}
.suriname {
background: linear-gradient(
180deg,
#377e3f 20%,
#fff 0,
#fff 30%,
#b40a2d 0,
#b40a2d 70%,
#fff 0,
#fff 80%,
#377e3f 0
);
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: 31px;
}
.sweden {
background: linear-gradient(
90deg,
transparent 30%,
#fecc00 0,
#fecc00 45%,
transparent 0
),
linear-gradient(
180deg,
transparent 38%,
#fecc00 0,
#fecc00 59%,
transparent 0
),
#006aa7;
}
.switzerland {
background: linear-gradient(
180deg,
transparent 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
transparent 0
),
linear-gradient(
90deg,
transparent 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
transparent 0
),
red;
background-size: 80px 80px;
background-repeat: no-repeat;
background-position: 50px 20px;
}
.syria {
background: linear-gradient(
180deg,
#ce1126 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#000 66.66667%
);
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: 40px;
}
.tanzania {
background: linear-gradient(
145deg,
#1eb53a 40%,
#fcd116 0,
#fcd116 43%,
#000 0,
#000 57%,
#fcd116 0,
#fcd116 60%,
#00a3dd 0
);
position: relative;
}
.thailand {
background: linear-gradient(
180deg,
#ed1c24 15%,
#fff 0,
#fff 30%,
#241d4f 0,
#241d4f 70%,
#fff 0,
#fff 85%,
#ed1c24 0
);
}
.togo {
background: repeating-linear-gradient(
180deg,
#006a4e,
#006a4e 20%,
#ffce00 20%,
#ffce00 40%
);
position: relative;
}
.togo:before {
position: absolute;
content: "★";
box-sizing: border-box;
text-align: center;
font-size: 40px;
padding-top: 6px;
color: #fff;
background: #d21034;
height: 71px;
width: 71px;
}
.tonga {
background: #c10000;
position: relative;
}
.tonga:before {
position: absolute;
content: "";
width: 50%;
height: 50%;
background: linear-gradient(
180deg,
transparent 33.33333%,
#c10000 33.33333%,
#c10000 66.66667%,
transparent 0
),
linear-gradient(
90deg,
transparent 33.33333%,
#c10000 33.33333%,
#c10000 66.66667%,
transparent 0
),
#fff;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 50% 10px;
}
.trinidad-and-tobago {
background: linear-gradient(
45deg,
transparent 40%,
#fff 0,
#fff 43%,
#000 0,
#000 57%,
#fff 0,
#fff 60%,
transparent 0
),
#ce1126;
}
.tunisia {
background: radial-gradient(60px at 55% 50%, #fff 35%, transparent 0),
radial-gradient(
90px at 50% 50%,
transparent 30%,
#fff 0,
#fff 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: 37px;
left: 23px;
transform: rotate(45deg);
}
.turkey {
background: radial-gradient(77px at 40% 50%, #e30a17 35%, transparent 0),
radial-gradient(90px at 36% 50%, #fff 30%, #fff 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: #fff;
text-align: center;
top: 39px;
left: 28px;
transform: rotate(45deg);
}
.ukraine {
background: linear-gradient(180deg, #005bbb 50%, #ffd500 0);
}
.uae {
background: linear-gradient(90deg, red 30%, transparent 0),
linear-gradient(
180deg,
#00732f 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#000 66.66667%
);
}
.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(
180deg,
transparent 40%,
#cc142b 0,
#cc142b 60%,
transparent 0
),
linear-gradient(
90deg,
transparent 45%,
#cc142b 0,
#cc142b 55%,
transparent 0
),
linear-gradient(180deg, transparent 35%, #fff 0, #fff 65%, transparent 0),
linear-gradient(90deg, transparent 40%, #fff 0, #fff 60%, transparent 0),
linear-gradient(
146deg,
transparent 50%,
#cc142b 0,
#cc142b 53%,
transparent 0
) -65px 45px,
linear-gradient(
146deg,
transparent 50%,
#cc142b 0,
#cc142b 53%,
transparent 0
)
55px -45px,
linear-gradient(
34deg,
transparent 50%,
#cc142b 0,
#cc142b 53%,
transparent 0
) -75px -43px,
linear-gradient(
34deg,
transparent 50%,
#cc142b 0,
#cc142b 53%,
transparent 0
)
70px 46px,
linear-gradient(146deg, transparent 45%, #fff 0, #fff 55%, transparent 0),
linear-gradient(34deg, transparent 45%, #fff 0, #fff 55%, transparent 0);
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: #ff0;
font-size: 64px;
top: 14px;
}
.western-sahara {
background: radial-gradient(48px at 53% 50%, #fff 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(
180deg,
#000 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#007229 66.66667%
);
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: 46px;
left: 6px;
}
.yemen {
background: linear-gradient(
180deg,
#ce1126 33.33333%,
#fff 33.33333%,
#fff 66.66667%,
#000 66.66667%
);
}
111 CSS Only Country Flags, Single Div Pure CSS Flags Plugin/Github
See Demo And Download
Official Website(dhanishgajjar): Click Here
This superior jQuery/javascript plugin is developed by dhanishgajjar. For extra advanced usage, please go to the official website.
Be First to Comment