Press "Enter" to skip to content

Single Div Pure CSS Country Flags Javascript

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

    Leave a Reply

    Your email address will not be published.