├── .gitignore ├── .DS_Store ├── repo-img └── flags.png ├── scss ├── _variables.scss ├── flags │ ├── _k.scss │ ├── _y.scss │ ├── _h.scss │ ├── _v.scss │ ├── _q.scss │ ├── _f.scss │ ├── _w.scss │ ├── _e.scss │ ├── _j.scss │ ├── _d.scss │ ├── _u.scss │ ├── _a.scss │ ├── _r.scss │ ├── _l.scss │ ├── _p.scss │ ├── _m.scss │ ├── _t.scss │ ├── _g.scss │ ├── _i.scss │ ├── _c.scss │ ├── _n.scss │ ├── _b.scss │ └── _s.scss ├── _mixins.scss ├── style.scss └── _base.scss ├── package.json ├── LICENSE ├── index.pug ├── README.md ├── dist ├── index.html ├── style.a6dae8f7.js └── style.a6dae8f7.js.map └── .cache ├── 28 └── f356eca2f3386eea9529872a9dbae8.json ├── 62 └── 7490ceaa26dcaec7235a6291a7aa20.json ├── 80 └── 6993900c3d292fce616a8952d5bff2.json ├── f0 └── fcb96121f7b6e3eb365439e8478349.json ├── 0c └── 8059e707600f2513f168f993f1d5f0.json ├── f1 └── dcad8dd2a74fd3a9fb00c2078d23b0.json ├── eb └── a08d830e919b3dc91d8e91ee8d8993.json └── 8c └── 064a5d1c1db798ff60afebc53ac0c6.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.sass-cache -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/css-flags/HEAD/.DS_Store -------------------------------------------------------------------------------- /repo-img/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhanishgajjar/css-flags/HEAD/repo-img/flags.png -------------------------------------------------------------------------------- /scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $width: 180px; 2 | $height: 120px; 3 | 4 | $third-height: $height / 3; 5 | $half-height: $height / 2; 6 | $half-width: $width / 2; 7 | $third-width: $width / 3; -------------------------------------------------------------------------------- /scss/flags/_k.scss: -------------------------------------------------------------------------------- 1 | // Start of Kuwait 2 | 3 | .kuwait { 4 | background: white; 5 | border-left: 50px solid black; 6 | border-top: 35px solid #007A3D; 7 | border-bottom: 35px solid #CE1126; 8 | } 9 | 10 | // End of Kuwait -------------------------------------------------------------------------------- /scss/flags/_y.scss: -------------------------------------------------------------------------------- 1 | // Start of Yemen 2 | 3 | .yemen { 4 | background: 5 | linear-gradient(to bottom, #CE1126 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2)); 6 | } 7 | 8 | // End of Yemen -------------------------------------------------------------------------------- /scss/flags/_h.scss: -------------------------------------------------------------------------------- 1 | // Start of Hungary 2 | 3 | .hungary { 4 | background: 5 | linear-gradient(to bottom, #CD2A3E calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #436F4D calc(100% / 3 * 2)); 6 | } 7 | 8 | // End of Hungary -------------------------------------------------------------------------------- /scss/flags/_v.scss: -------------------------------------------------------------------------------- 1 | // Start of Vietnam 2 | 3 | .vietnam { 4 | background: #DA251D; 5 | position: relative; 6 | } 7 | 8 | .vietnam:before { 9 | @include shape($content: '★'); 10 | @include center; 11 | text-align: center; 12 | color: #FFFF00; 13 | font-size: 64px; 14 | top: 14px; 15 | } 16 | 17 | // End of Vietnam -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flags", 3 | "version": "1.0.0", 4 | "description": "Single Div Pure CSS Flags", 5 | "main": "index.html", 6 | "author": "Dhanish Gajjar", 7 | "license": "MIT", 8 | "devDependencies": { 9 | "pug": "^2.0.4", 10 | "sass": "^1.22.4" 11 | }, 12 | "dependencies": { 13 | "parcel": "^1.12.4" 14 | }, 15 | "scripts": { 16 | "dev": "parcel index.pug", 17 | "build": "parcel index.pug" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/flags/_q.scss: -------------------------------------------------------------------------------- 1 | // Start of Qatar 2 | 3 | .qatar { 4 | background: linear-gradient(90deg,white 25%, #8D1B3D 25%); 5 | position: relative; 6 | } 7 | 8 | .qatar:before { 9 | @include shape; 10 | width: 20px; 11 | height: 100%; 12 | background: 13 | linear-gradient(160deg, white 30%, transparent 12%) 0 7px, 14 | linear-gradient(20deg, white 30%, transparent 12%) 0 7px; 15 | background-size: 20px calc(120px / 9.1); 16 | left: 44px; 17 | top: 0; 18 | } 19 | 20 | // End of Qatar -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // This is for creating empty / or specific psuedo objects 2 | @mixin shape($position: absolute, $content: "") { 3 | position: $position; 4 | content: $content; 5 | } 6 | 7 | // Simple mixin to turn any square into a circle 8 | @mixin makeCircle { 9 | border-radius: 50%; 10 | } 11 | 12 | // This is for center aligning the psuedo elements, which are absolute in position 13 | @mixin center { 14 | left: 0; 15 | margin-left: auto; 16 | right: 0; 17 | margin-right: auto; 18 | } 19 | -------------------------------------------------------------------------------- /scss/flags/_f.scss: -------------------------------------------------------------------------------- 1 | // Start of Finland 2 | 3 | .finland { 4 | background: 5 | linear-gradient(to bottom, transparent 35%, #003580 35%, #003580 60%, transparent 60%), 6 | linear-gradient(to right, transparent 30%, #003580 30%, #003480 45%, transparent 45%), 7 | white; 8 | } 9 | 10 | // End of Finland 11 | 12 | // Start of France 13 | 14 | .france { 15 | background: 16 | linear-gradient(to right, #002395 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #ED2939 calc(100% / 3 * 2)); 17 | } 18 | 19 | // End of France -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'base'; 3 | @import 'mixins'; 4 | 5 | // Flags 6 | @import 'flags/a'; 7 | @import 'flags/b'; 8 | @import 'flags/c'; 9 | @import 'flags/d'; 10 | @import 'flags/e'; 11 | @import 'flags/f'; 12 | @import 'flags/g'; 13 | @import 'flags/h'; 14 | @import 'flags/i'; 15 | @import 'flags/j'; 16 | @import 'flags/k'; 17 | @import 'flags/l'; 18 | @import 'flags/m'; 19 | @import 'flags/n'; 20 | @import 'flags/p'; 21 | @import 'flags/q'; 22 | @import 'flags/r'; 23 | @import 'flags/s'; 24 | @import 'flags/t'; 25 | @import 'flags/u'; 26 | @import 'flags/v'; 27 | @import 'flags/w'; 28 | @import 'flags/y'; -------------------------------------------------------------------------------- /scss/flags/_w.scss: -------------------------------------------------------------------------------- 1 | // Start of Western Sahara 2 | 3 | .western-sahara { 4 | background: 5 | radial-gradient(48px at 53% 50%, white 35%, transparent 0), 6 | radial-gradient(50px at 50% 50%, #D21034 35%, transparent 0), 7 | linear-gradient(135deg, #D21034 20%, transparent 0) 0 -60px, 8 | linear-gradient(45deg,#D21034 20%, transparent 0) 0 -60px, 9 | linear-gradient(to bottom, black calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #007229 calc(100% / 3 * 2)); 10 | background-size: 180px 120px; 11 | position: relative; 12 | } 13 | 14 | .western-sahara:before { 15 | @include shape($content: '★'); 16 | @include center; 17 | text-align: center; 18 | font-size: 20px; 19 | color: #D21034; 20 | top: 46px; 21 | left: 6px; 22 | } 23 | 24 | // End of Western Sahara -------------------------------------------------------------------------------- /scss/flags/_e.scss: -------------------------------------------------------------------------------- 1 | // Start of East Timor 2 | 3 | .east-timor { 4 | background: 5 | linear-gradient(145deg, black 25%, transparent 15%) 0 -60px, 6 | linear-gradient(34deg, black 25%, transparent 15%) 0 -60px, 7 | linear-gradient(155deg, #FFC726 30%, transparent 15%) 0 -60px, 8 | linear-gradient(25deg, #FFC726 30%, transparent 15%) 0 -60px, 9 | #DC241F; 10 | position: relative; 11 | } 12 | 13 | .east-timor:before { 14 | @include shape($content: '★'); 15 | color: white; 16 | font-size: 36px; 17 | top: 36px; 18 | left: 16px; 19 | transform: rotate(115deg); 20 | } 21 | 22 | // End of East Timor 23 | 24 | // Start of Estonia 25 | 26 | .estonia { 27 | background: 28 | linear-gradient(to bottom, #4891D9 calc(100% / 3), black calc(100% / 3), black calc(100% / 3 * 2), white calc(100% / 3 * 2)); 29 | } 30 | 31 | // End of Estonia -------------------------------------------------------------------------------- /scss/flags/_j.scss: -------------------------------------------------------------------------------- 1 | // Start of Jamaica 2 | 3 | .jamaica { 4 | background: 5 | linear-gradient(146deg, rgb(0, 155, 58) 20%, transparent 15%) 90px -118px, 6 | linear-gradient(-146deg, #009B3A 20%, transparent 15%) 90px -118px, 7 | linear-gradient(-34deg, #009B3A 20%, transparent 15%) 90px 118px, 8 | linear-gradient(34deg, #009B3A 20%, transparent 15%) 90px 118px, 9 | linear-gradient(146deg, black 20%, transparent 15%) 0 -60px, 10 | linear-gradient(34deg, black 20%, transparent 15%) 0 -60px, 11 | linear-gradient(-146deg, black 20%, transparent 15%) 180px -60px, 12 | linear-gradient(-34deg, black 20%, transparent 15%) 180px -60px, 13 | #FED100; 14 | } 15 | 16 | // End of Jamaica 17 | 18 | // Start of Japan 19 | 20 | .japan { 21 | background: 22 | radial-gradient(100px at 50% 50%, #BC002D 0, #BC002D 35%, transparent 35%, transparent 100%), 23 | white; 24 | } 25 | 26 | // End of japan -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Dhanish 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /scss/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body, .container, ul, li { 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | 11 | body { 12 | font-family: sans-serif; 13 | width: 100%; 14 | background: #eee; 15 | flex-direction: column; 16 | } 17 | 18 | ul, li { 19 | margin: 0; 20 | padding: 0; 21 | list-style: none; 22 | } 23 | 24 | ul { 25 | flex-wrap: wrap; 26 | margin-top: 20px; 27 | } 28 | 29 | li { 30 | margin: .5em; 31 | padding: .5em 1em; 32 | background: white; 33 | flex-direction: column; 34 | } 35 | 36 | .container { 37 | flex-direction: column; 38 | } 39 | 40 | .text { 41 | width: 900px; 42 | } 43 | 44 | .flag { 45 | width: $width; 46 | height: $height; 47 | overflow: hidden; 48 | border: 1px solid #efefef; 49 | } 50 | 51 | h1 { 52 | font-weight: normal; 53 | color: rebeccapurple; 54 | font-size: 2em; 55 | } 56 | 57 | h2 { 58 | font-size: .75em; 59 | font-weight: bold; 60 | color: lightgray; 61 | } 62 | 63 | h3 { 64 | text-align: center; 65 | font-size: .65em; 66 | color: slategray; 67 | font-weight: bold; 68 | text-transform: uppercase; 69 | } 70 | 71 | a { 72 | color: slategray; 73 | font-size: 1em; 74 | } -------------------------------------------------------------------------------- /scss/flags/_d.scss: -------------------------------------------------------------------------------- 1 | // Start of Democratic Republic of Congo 2 | 3 | .democratic-republic-of-congo { 4 | background: 5 | linear-gradient(146deg,#007FFF 0%, #007FFF 45%, #F7D618 45%, #F7D618 50%, #CE1021 50%, #CE1021 60%, #F7D618 60%, #F7D618 65%, #007FFF 65%, #007FFF 100% ); 6 | position: relative; 7 | } 8 | 9 | .democratic-republic-of-congo:before { 10 | @include shape($content: '★'); 11 | color: #F7D618; 12 | font-size: 36px; 13 | top: 10px; 14 | left: 20px; 15 | } 16 | 17 | // End of Democratic Republic of Congo 18 | 19 | // Start of Denmark 20 | 21 | .denmark { 22 | background: 23 | linear-gradient(to bottom, transparent 40%, white 40%, white 55%, transparent 55%, transparent 100%), 24 | linear-gradient(to right, transparent 30%, white 30%, white 40%, transparent 40%, transparent 100%), 25 | #C60C30; 26 | } 27 | 28 | // End of Denmark 29 | 30 | // Start of Djibouti 31 | 32 | .djibouti { 33 | background: 34 | linear-gradient(146deg, white 25%, transparent 15%) 0 -60px, 35 | linear-gradient(34deg, white 25%, transparent 15%) 0 -60px, 36 | linear-gradient(to bottom, #6AB2E7 50%, #12AD2B 50%); 37 | background-size: 180px 120px; 38 | position: relative; 39 | } 40 | 41 | .djibouti:before { 42 | @include shape($content: '★'); 43 | color: #D7141A; 44 | font-size: 30px; 45 | top: 40px; 46 | left: 16px; 47 | } 48 | 49 | // End of Djibouti -------------------------------------------------------------------------------- /scss/flags/_u.scss: -------------------------------------------------------------------------------- 1 | // Start of Ukraine 2 | 3 | .ukraine { 4 | background: 5 | linear-gradient(to bottom, #005BBB 50%, #FFD500 50%); 6 | } 7 | 8 | // End of Ukraine 9 | 10 | // Start of UAE 11 | 12 | .uae { 13 | background: 14 | linear-gradient(to right, #FF0000 30%, transparent 0), 15 | linear-gradient(to bottom, #00732F calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2)); 16 | } 17 | 18 | // End of UAE 19 | 20 | // Start of UK 21 | 22 | .the-united-kingdom { 23 | background: 24 | #00247D; 25 | background-size: 100px 100px; 26 | position: relative; 27 | } 28 | 29 | .the-united-kingdom:before { 30 | @include shape; 31 | top: 0; 32 | left: 0; 33 | background: 34 | linear-gradient(to bottom, transparent 40%, #CC142B 40%, #CC142B 60%, transparent 60% ), 35 | linear-gradient(to right, transparent 45%, #CC142B 45%, #CC142B 55%, transparent 55% ), 36 | linear-gradient(to bottom, transparent 35%, white 35%,white 65%, transparent 65%), 37 | linear-gradient(to right, transparent 40%, white 40%,white 60%, transparent 60%), 38 | linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -65px 45px, 39 | linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 55px -45px, 40 | linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -75px -43px, 41 | linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 70px 46px, 42 | linear-gradient(146deg, transparent 45%, white 45%, white 55%, transparent 55%), 43 | linear-gradient(34deg, transparent 45%, white 45%, white 55%, transparent 55%); 44 | width: 180px; 45 | height: 120px; 46 | background-repeat: no-repeat; 47 | } 48 | 49 | // End of United Kingdom -------------------------------------------------------------------------------- /index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='en') 3 | head 4 | title Single Div Pure CSS Flags 5 | link(href="scss/style.scss" rel="stylesheet") 6 | body 7 | div.container 8 | 9 | h1 Single Div Pure CSS Flags 10 | 11 | a(href="https://instagram.com/dhanishgajjar" target="_blank") Made by @dhanishgajjar 12 | 13 | ul 14 | 15 | - var countries = ["algeria", "armenia","austria","azerbaijan","bahamas","bahrain","bangladesh", "barbados", "belgium", "benin", "bolivia", "botswana", "brazil", "bulgaria", "burkina faso", "burundi", "cameroon", "central-african-republic", "chad", "chile", "colombia", "comoros", "costa-rica", "cote-d-ivoire", "cuba", "czech-republic", "democratic-republic-of-congo", "denmark", "djibouti", "east-timor", "estonia", "finland", "france", "gabon", "the-gambia", "germany", "ghana", "greece", "guinea", "guinea-bissau", "guyana", "hungary", "iceland","india" ,"indonesia", "iran", "iraq", "ireland", "israel", "italy", "jamaica", "japan", "kuwait", "laos", "latvia", "liberia", "libya", "lithuania", "luxembourg", "madagascar", "malaysia", "maldives", "mali", "mauritania", "mauritius", "monaco", "myanmar", "namibia", "nauru", "nepal", "the-netherlands", "niger", "nigeria", "north-korea", "norway", "pakistan", "palau", "panama", "peru", "phillippines", "poland", "qatar", "republic-of-china", "republic-of-congo", "romania", "russia", "rwanda", "saint-kitts-and-nevis", "saint-lucia", "sao-tome-and-principe", "senegal", "seychelles", "sierra-leone", "somalia", "south-sudan", "sudan", "suriname", "sweden", "switzerland", "syria", "tanzania", "thailand", "togo", "tonga", "trinidad-and-tobago", "tunisia", "turkey", "ukraine", "uae", "the-united-kingdom", "vietnam", "western-sahara", "yemen"] 16 | 17 | each country, i in countries 18 | li 19 | h2=(i+1) 20 | div(class="flag " + country) 21 | h3= country.replace(/-/g, ' ') 22 | -------------------------------------------------------------------------------- /scss/flags/_a.scss: -------------------------------------------------------------------------------- 1 | // Start of Algeria 2 | 3 | .algeria { 4 | background: linear-gradient(90deg, #006232, #006232 50%, white 50%, white 100%); 5 | position: relative; 6 | } 7 | 8 | .algeria:before { 9 | @include shape; 10 | @include makeCircle; 11 | @include center; 12 | width: 50px; 13 | height: 50px; 14 | background: transparent; 15 | box-shadow: -9px 0 0 8px #D21034; 16 | top: 35px; 17 | right: -10px; 18 | } 19 | 20 | .algeria:after { 21 | @include shape($content: '\2605'); 22 | @include center; 23 | color: #D21034; 24 | font-size: 2em; 25 | transform: rotate(20deg); 26 | top: calc(50% - 12px); 27 | left: calc(50% - 5px); 28 | } 29 | 30 | // End of Algeria 31 | 32 | // Start of Armenia 33 | 34 | .armenia { 35 | background: linear-gradient(180deg,#D90012,#D90011 calc(100% / 3),#0033A0 calc(100% / 3), #0033A0 calc(100% / 3 * 2),#F2A800 calc(100% / 3 * 2), #F2A800 100%); 36 | } 37 | 38 | // End of Armenia 39 | 40 | // Start of Austria 41 | 42 | .austria { 43 | background: linear-gradient(180deg,#ED2939,#ED2939 calc(100% / 3),white calc(100% / 3), white calc(100% / 3 * 2),#ED2939 calc(100% / 3 * 2), #ED2939 100%); 44 | } 45 | 46 | // End of Austria 47 | 48 | // Start of Azerbaijan 49 | 50 | .azerbaijan { 51 | background: linear-gradient(180deg,#00b5e2,#00b5e2 calc(100% / 3),#ef3340 calc(100% / 3), #ef3340 calc(100% / 3 * 2),#509e2f calc(100% / 3 * 2), #509e2f 100%); 52 | position: relative; 53 | } 54 | 55 | .azerbaijan:before { 56 | @include shape; 57 | @include makeCircle; 58 | @include center; 59 | background: transparent; 60 | width: 30px; 61 | height: 30px; 62 | top: calc(50% - 15px); 63 | left: -6px; 64 | box-shadow: -4px 0 0 3px white; 65 | } 66 | 67 | .azerbaijan:after { 68 | @include shape($content: '✸'); 69 | color: white; 70 | font-size: 24px; 71 | transform: rotate(22deg); 72 | top: calc(50% - 13px); 73 | left: 52%; 74 | } 75 | 76 | // End of Azerbaijan -------------------------------------------------------------------------------- /scss/flags/_r.scss: -------------------------------------------------------------------------------- 1 | // Start of Republic of China 2 | 3 | .republic-of-china { 4 | background: 5 | #FE0000; 6 | position: relative; 7 | } 8 | 9 | .republic-of-china:before { 10 | @include shape($content: '✹'); 11 | box-sizing: border-box; 12 | color: white; 13 | background: #000095; 14 | padding-left: 20px; 15 | top: 0; 16 | width: 90px; height: 60px; 17 | font-size: 56px; 18 | } 19 | 20 | .republic-of-china:after { 21 | @include shape; 22 | @include makeCircle; 23 | height: 20px; 24 | width: 20px; 25 | background: white; 26 | border: 2px solid #000095; 27 | top: 20px; 28 | left: 30px; 29 | } 30 | 31 | // End of Republic of China 32 | 33 | // Start of Republic of Congo 34 | 35 | .republic-of-congo { 36 | background: 37 | linear-gradient(135deg,#009543 40%,#FBDE4A 40%, #FBDE4A 60%, #D21034 60%, #DC241F 60%); 38 | position: relative; 39 | } 40 | 41 | // End of Republic of Congo 42 | 43 | // Start of Romania 44 | 45 | .romania { 46 | background: 47 | linear-gradient(to right, #002B7F calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #CE1126 calc(100% / 3 * 2)); 48 | } 49 | 50 | // End of Romania 51 | 52 | // Start of Russia 53 | 54 | .russia { 55 | background: 56 | linear-gradient(to bottom, white calc(100% / 3), #0039A6 calc(100% / 3), #0039A6 calc(100% / 3 * 2), #D52B1E calc(100% / 3 * 2)); 57 | } 58 | 59 | // End of Russia 60 | 61 | // Start of Rwanda 62 | 63 | .rwanda { 64 | background: 65 | linear-gradient(to bottom, #00A1DE 50%, #FAD201 50%, #FAD201 75%, #20603D 75%); 66 | position: relative; 67 | } 68 | 69 | .rwanda:before { 70 | @include shape($content: '✺'); 71 | right: 20px; 72 | box-sizing: border-box; 73 | color: #E5BE01; 74 | font-size: 36px; 75 | top: 10px; 76 | } 77 | 78 | .rwanda:after { 79 | @include shape; 80 | @include makeCircle; 81 | height: 13px; 82 | width: 13px; 83 | background: #E5BE01; 84 | border: 1px solid #00A1DE; 85 | top: 23px; 86 | right: 26px; 87 | } 88 | 89 | // End of Rwanda -------------------------------------------------------------------------------- /scss/flags/_l.scss: -------------------------------------------------------------------------------- 1 | // Start of Laos 2 | 3 | .laos { 4 | background: 5 | radial-gradient(70px at 50% 50%, white 0, white 35%, transparent 35%, transparent 100%), 6 | linear-gradient(to bottom, #CE1126 25%, #002868 25%, #002868 75%, #CE1126 75%); 7 | } 8 | 9 | // End of Laos 10 | 11 | // Start of Latvia 12 | 13 | .latvia { 14 | background: 15 | linear-gradient(to bottom, #9E3039 40%, white 40%, white 60%, #9E3039 60%); 16 | } 17 | 18 | // End of Latvia 19 | 20 | // Start of Liberia 21 | 22 | .liberia { 23 | background: 24 | repeating-linear-gradient(to bottom, #BF0A30, #BF0A30 calc(120px / 11), white (120px / 11), white (120px / 11 * 2)); 25 | position: relative; 26 | } 27 | 28 | .liberia:before { 29 | @include shape($content: '★'); 30 | color: white; 31 | font-size: 24px; 32 | box-sizing: border-box; 33 | background: #002868; 34 | text-align: center; 35 | padding-top: 10px; 36 | width: calc(120px / 11 * 5); 37 | height: calc(120px / 11 * 5); 38 | } 39 | 40 | // End of Liberia 41 | 42 | // Start of Libya 43 | 44 | .libya { 45 | background: 46 | radial-gradient(45px at 52% 50%, black 0, black 35%, transparent 35%, transparent 100%), 47 | radial-gradient(50px at 50% 50%, white 0, white 35%, transparent 35%, transparent 100%), 48 | linear-gradient(to bottom, #E70013 25%, black 25%, black 75%, #239E46 65%); 49 | position: relative; 50 | } 51 | 52 | .libya:before { 53 | @include shape($content: '★'); 54 | @include center; 55 | color: white; 56 | text-align: center; 57 | top: 40%; 58 | left: 20%; 59 | transform: rotate(45deg); 60 | } 61 | 62 | // End of Libya 63 | 64 | // Start of Lithuania 65 | 66 | .lithuania { 67 | background: 68 | linear-gradient(to bottom, #FDB913 calc(100% / 3), #006A44 calc(100% / 3), #006A44 calc(100% / 3 * 2), #C1272D calc(100% / 3 * 2)); 69 | } 70 | 71 | // End of Lithuania 72 | 73 | // Start of Luxemborg 74 | 75 | .luxembourg { 76 | background: 77 | linear-gradient(to bottom, #ED2939 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #00A1DE calc(100% / 3 * 2)); 78 | } 79 | 80 | // End of Luxemborg -------------------------------------------------------------------------------- /scss/flags/_p.scss: -------------------------------------------------------------------------------- 1 | // Start of Pakistan 2 | 3 | .pakistan { 4 | background: radial-gradient( 5 | 90px at 71% 42%, 6 | #01411c, 7 | #01411c 35%, 8 | transparent 35%, 9 | transparent 100% 10 | ), 11 | radial-gradient( 12 | 100px at 65% 50%, 13 | white, 14 | white 35%, 15 | transparent 35%, 16 | transparent 100% 17 | ), 18 | linear-gradient(to right, white 30%, #01411c 30%); 19 | position: relative; 20 | } 21 | 22 | .pakistan:before { 23 | @include shape($content: "★"); 24 | color: white; 25 | transform: rotate(40deg); 26 | font-size: 24px; 27 | right: 30px; 28 | top: 25px; 29 | } 30 | 31 | // End of Pakistan 32 | 33 | // Start of Palau 34 | 35 | .palau { 36 | background: radial-gradient( 37 | 100px at 40% 50%, 38 | #ffde00, 39 | #ffde00 35%, 40 | transparent 35%, 41 | transparent 100% 42 | ), 43 | #4aadd6; 44 | } 45 | 46 | // End of Palau 47 | 48 | // Start of Panama 49 | 50 | .panama { 51 | background: linear-gradient(90deg, #005293 50%, transparent 50%), 52 | linear-gradient(#d21034 50%, transparent 50%), white; 53 | position: relative; 54 | } 55 | 56 | .panama:before, 57 | .panama:after { 58 | @include shape($content: "★"); 59 | box-sizing: border-box; 60 | background: white; 61 | font-size: 32px; 62 | padding-left: 15%; 63 | padding-top: 4%; 64 | width: 89px; 65 | height: 59px; 66 | } 67 | 68 | .panama:before { 69 | color: #005293; 70 | } 71 | 72 | .panama:after { 73 | right: 0; 74 | bottom: 0; 75 | color: #d21034; 76 | } 77 | 78 | // End of Panama 79 | 80 | // Start of Peru 81 | 82 | .peru { 83 | background: linear-gradient( 84 | to right, 85 | #d91023 calc(100% / 3), 86 | white calc(100% / 3), 87 | white calc(100% / 3 * 2), 88 | #d91023 calc(100% / 3 * 2) 89 | ); 90 | } 91 | 92 | // End of Peru 93 | 94 | // Start of Phillippines 95 | 96 | .phillippines { 97 | background: linear-gradient(146deg, white 25%, transparent 15%) 0 -60px, 98 | linear-gradient(34deg, white 25%, transparent 15%) 0 -60px, 99 | linear-gradient(to bottom, #0035a9 50%, #d00922 50%); 100 | background-size: 180px 120px; 101 | position: relative; 102 | &:before { 103 | position: absolute; 104 | content: '☀'; 105 | color: orange; 106 | font-size: 2.25em; 107 | top: 0; 108 | bottom: 0; 109 | margin: auto 0; 110 | left: 5%; 111 | height: 1em; 112 | } 113 | } 114 | 115 | // End of Phillippines 116 | 117 | // Start of Poland 118 | 119 | .poland { 120 | background: linear-gradient(to bottom, white 50%, #dc143c 50%); 121 | } 122 | 123 | // End of Poland 124 | -------------------------------------------------------------------------------- /scss/flags/_m.scss: -------------------------------------------------------------------------------- 1 | // Start of Madagascar 2 | 3 | .madagascar { 4 | background: 5 | linear-gradient(to right, white 30%, transparent 30%), 6 | linear-gradient(to bottom, #FC3D32 50%, #007E3A 50%); 7 | } 8 | 9 | // End of Madagascar 10 | 11 | // Start of Malaysia 12 | 13 | .malaysia { 14 | background: 15 | repeating-linear-gradient(to bottom, #BF0A30, #BF0A30 calc(120px / 13), white (120px / 13), white (120px / 13 * 2)); 16 | position: relative; 17 | } 18 | 19 | .malaysia:before { 20 | @include shape($content: '✹'); 21 | color: #FFCC00; 22 | font-size: 48px; 23 | box-sizing: border-box; 24 | background: 25 | radial-gradient(65px at 50% 50%, #010066 0, #010066 35%, transparent 35%, transparent 100%), 26 | radial-gradient(75px at 42% 50%, #FFCC00 0, #FFCC00 35%, transparent 35%, transparent 100%), 27 | #010066; 28 | text-align: center; 29 | padding-top: 5px; 30 | padding-left: 36px; 31 | width: calc(180px / 2); 32 | height: calc(120px / 13 * 7); 33 | } 34 | 35 | // End of Malaysia 36 | 37 | // Start of Maldives 38 | 39 | .maldives { 40 | border: 30px solid #D21034; 41 | background: 42 | radial-gradient(55px at 55% 50%, #007E3A 0, #007E3A 35%, transparent 35%, transparent 100%), 43 | radial-gradient(60px at 50% 50%, white 0, white 35%, transparent 35%, transparent 100%), 44 | #007E3A; 45 | } 46 | 47 | // End of Maldives 48 | 49 | // Start of Mali 50 | 51 | .mali { 52 | background: 53 | linear-gradient(to right, #14B53A calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #CE1126 calc(100% / 3 * 2)); 54 | } 55 | 56 | // End of Mali 57 | 58 | // Start of Mauritania 59 | 60 | .mauritania { 61 | background: 62 | radial-gradient(120px at 50% 30%, #006233 0, #006233 35%, transparent 35%, transparent 100%), 63 | radial-gradient(120px at 50% 40%, #FFC400 0, #FFC400 35%, transparent 35%, transparent 100%), 64 | #006233; 65 | position: relative; 66 | } 67 | 68 | .mauritania:before { 69 | @include shape($content: '★'); 70 | @include center; 71 | font-size: 24px; 72 | color: #FFC400; 73 | text-align: center; 74 | top: 15%; 75 | } 76 | 77 | // End of Mauritania 78 | 79 | // Start of Mauritius 80 | 81 | .mauritius { 82 | background: 83 | linear-gradient(to bottom, #EA2839 25%, #1A206D 25%, #1A206D 50%, #FFD500 50%, #FFD500 75%, #00A551 75%); 84 | } 85 | 86 | // End of Mauritius 87 | 88 | // Start of Monaco 89 | 90 | .monaco { 91 | background: 92 | linear-gradient(to bottom, #CE1126 50%, white 50%); 93 | } 94 | 95 | // End of Monaco 96 | 97 | // Start of Myanmar 98 | 99 | .myanmar { 100 | background: 101 | linear-gradient(to bottom, #FECB00 calc(100% / 3), #34B233 calc(100% / 3), #34B233 calc(100% / 3 * 2), #EA2839 calc(100% / 3 * 2)); 102 | position: relative; 103 | } 104 | 105 | .myanmar:before { 106 | @include shape($content: '★'); 107 | @include center; 108 | color: white; 109 | font-size: 64px; 110 | text-align: center; 111 | top: 10px; 112 | } 113 | 114 | // End of Myanmar -------------------------------------------------------------------------------- /scss/flags/_t.scss: -------------------------------------------------------------------------------- 1 | // Start of Tanzania 2 | 3 | .tanzania { 4 | background: 5 | linear-gradient(145deg,#1EB53A 40%, #FCD116 40%, #FCD116 43%, black 43%, black 57%, #FCD116 57%, #FCD116 60%, #00A3DD 60%); 6 | position: relative; 7 | } 8 | 9 | // End of Tanzania 10 | 11 | // Start of Thailand 12 | 13 | .thailand { 14 | background: 15 | linear-gradient(to bottom, #ED1C24 15%, white 15%, white 30%, #241D4F 30%, #241D4F 70%, white 70%, white 85%, #ED1C24 85%); 16 | } 17 | 18 | // End of Thailand 19 | 20 | // Start of Togo 21 | 22 | .togo { 23 | background: 24 | repeating-linear-gradient(to bottom, #006A4E, #006A4E calc(100% / 5), #FFCE00 calc(100% / 5), #FFCE00 calc(100% / 5 * 2)); 25 | position: relative; 26 | } 27 | 28 | .togo:before { 29 | @include shape($content: '★'); 30 | box-sizing: border-box; 31 | text-align: center; 32 | font-size: 40px; 33 | padding-top: 6px; 34 | color: white; 35 | background: #D21034; 36 | height: 71px; width: 71px; 37 | } 38 | 39 | // End of Togo 40 | 41 | // Start of Tonga 42 | 43 | .tonga { 44 | background:#C10000; 45 | position: relative; 46 | } 47 | 48 | .tonga:before { 49 | @include shape; 50 | width: 50%; 51 | height: 50%; 52 | background: 53 | linear-gradient(to bottom, transparent calc(100% / 3), #C10000 calc(100% / 3), #C10000 calc(100% / 3 * 2), transparent 0), 54 | linear-gradient(to right, transparent calc(100% / 3), #C10000 calc(100% / 3), #C10000 calc(100% / 3 * 2), transparent 0), 55 | white; 56 | background-size: 40px 40px; 57 | background-repeat: no-repeat; 58 | background-position: 50% 10px; 59 | } 60 | 61 | // End of Tonga 62 | 63 | // Start of Trinidad and Tobago 64 | 65 | .trinidad-and-tobago { 66 | background: 67 | linear-gradient(45deg,transparent 40%, white 40%, white 43%, black 43%, black 57%, white 57%, white 60%, transparent 0), 68 | #CE1126; 69 | } 70 | 71 | // End of Trinidad and Tobago 72 | 73 | // Start of Tunisia 74 | 75 | .tunisia { 76 | background: 77 | radial-gradient(60px at 55% 50%, white 35%, transparent 0), 78 | radial-gradient(90px at 50% 50%, transparent 30%, white 30%, white 36%, transparent 0), 79 | #E70013; 80 | position: relative; 81 | } 82 | 83 | .tunisia:before { 84 | @include shape($content: '★'); 85 | @include center; 86 | font-size: 30px; 87 | color: #E70013; 88 | text-align: center; 89 | top: 37px; 90 | left: 23px; 91 | transform: rotate(45deg); 92 | } 93 | 94 | // End of Tunisia 95 | 96 | // Start of Turkey 97 | 98 | .turkey { 99 | background: 100 | radial-gradient(77px at 40% 50%, #E30A17 35%, transparent 0), 101 | radial-gradient(90px at 36% 50%, white 30%, white 36%, transparent 0), 102 | #E30A17; 103 | position: relative; 104 | } 105 | 106 | .turkey:before { 107 | @include shape($content: '★'); 108 | @include center; 109 | font-size: 28px; 110 | color: white; 111 | text-align: center; 112 | top: 39px; 113 | left: 28px; 114 | transform: rotate(45deg); 115 | } 116 | 117 | 118 | // End of Turkey -------------------------------------------------------------------------------- /scss/flags/_g.scss: -------------------------------------------------------------------------------- 1 | // Start of Gabon 2 | 3 | .gabon { 4 | background: 5 | linear-gradient(to bottom, #009E60 calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #3A75C4 calc(100% / 3 * 2)); 6 | } 7 | 8 | // End of Gabon 9 | 10 | // Start of The Gambia 11 | 12 | .the-gambia { 13 | background: 14 | linear-gradient(to bottom, #CE1126 30%, white 30%, white 35%, #0C1C8C 35%, #0C1C8C 65%, white 65%, white 70%, #3A7728 70%); 15 | } 16 | 17 | // End of The Gambia 18 | 19 | // Start of Germany 20 | 21 | .germany { 22 | background: 23 | linear-gradient(to bottom, black calc(100% / 3), #DD0000 calc(100% / 3), #DD0000 calc(100% / 3 * 2), #FFCE00 calc(100% / 3 * 2)); 24 | } 25 | 26 | // End of Germany 27 | 28 | // Start of Ghana 29 | 30 | .ghana { 31 | background: 32 | linear-gradient(to bottom, #CE1126 calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #006B3F calc(100% / 3 * 2)); 33 | position: relative; 34 | } 35 | 36 | .ghana:before { 37 | @include shape($content: '★'); 38 | @include center; 39 | color: black; 40 | text-align: center; 41 | font-size: 40px; 42 | top: calc(50% - 27px); 43 | } 44 | 45 | // End of Ghana 46 | 47 | // Start of Greece 48 | 49 | .greece { 50 | background-image: 51 | repeating-linear-gradient(to bottom, #0D5EAF, #0D5EAF calc(120px / 9), white calc(120px / 9), white calc(120px / 9 * 2)); 52 | position: relative; 53 | } 54 | 55 | .greece:before { 56 | @include shape; 57 | width: calc(120px / 9 * 5); 58 | height: calc(120px / 9 * 5); 59 | background: 60 | linear-gradient(to bottom, transparent calc(120px / 9 * 2), white calc(120px / 9 * 2), white calc(120px / 9 * 3), transparent calc(120px / 9 * 3)), 61 | linear-gradient(to right, transparent calc(120px / 9 * 2), white calc(120px / 9 * 2), white calc(120px / 9 * 3), transparent calc(120px / 9 * 3)), 62 | #0D5EAF; 63 | } 64 | 65 | // End of Greece 66 | 67 | // Start of Guinea 68 | 69 | .guinea { 70 | background: 71 | linear-gradient(to right, #CE1126 calc(100% / 3), #FCD116 calc(100% / 3), #FCD116 calc(100% / 3 * 2), #009460 calc(100% / 3 * 2)); 72 | } 73 | 74 | // End of Guinea 75 | 76 | // Start of Guinea 77 | 78 | .guinea-bissau { 79 | background: 80 | linear-gradient(to right, #CE1126 35%, transparent 35%), 81 | linear-gradient(to bottom, #FCD116 50%, #009E49 50%); 82 | position: relative; 83 | } 84 | 85 | .guinea-bissau:before { 86 | @include shape($content: '★'); 87 | color: black; 88 | font-size: 40px; 89 | top: calc(50% - 27px); 90 | left: 10px; 91 | } 92 | 93 | // End of Guinea 94 | 95 | // Start of Guyana 96 | 97 | .guyana { 98 | background: 99 | linear-gradient(149deg, #CE1126 24%, transparent 15%) 0 -60px, 100 | linear-gradient(31deg, #CE1126 24%, transparent 15%) 0 -60px, 101 | linear-gradient(149deg, black 26%, transparent 15%) 0 -60px, 102 | linear-gradient(31deg, black 26%, transparent 15%) 0 -60px, 103 | linear-gradient(160deg, #FCD116 32%, transparent 15%) 0 -60px, 104 | linear-gradient(20deg, #FCD116 32%, transparent 15%) 0 -60px, 105 | linear-gradient(161deg, white 34%, transparent 15%) 0 -60px, 106 | linear-gradient(19deg, white 34%, transparent 15%) 0 -60px, 107 | #009E49; 108 | } 109 | 110 | // End of Guyana -------------------------------------------------------------------------------- /scss/flags/_i.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Cairo'); 2 | 3 | // Start of Iceland 4 | 5 | .iceland { 6 | background: 7 | linear-gradient(to bottom, transparent 43%, #D72828 43%, #D72828 54%, transparent 54%), 8 | linear-gradient(to right, transparent 34%, #D72828 34%, #D72828 41%, transparent 41%), 9 | linear-gradient(to right, transparent 30%, white 30%, white 45%, transparent 45%), 10 | linear-gradient(to bottom, transparent 38%, white 38%, white 59%, transparent 59%), 11 | #003897; 12 | } 13 | 14 | // End of Iceland 15 | 16 | // Start of India 17 | .india{ 18 | background: radial-gradient(circle, transparent calc(100% /6), #000080 calc((100% / 6) + 3%), transparent calc((100% / 6) + 3%)), 19 | linear-gradient(to bottom, #FF9933 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #138808 calc(100% / 3 * 2)); 20 | position: relative; 21 | } 22 | .india:before{ 23 | position: absolute; 24 | padding: 0; 25 | content: "✺"; 26 | font-size: 48px; 27 | line-height: 42px; 28 | text-align: center; 29 | font-weight: 100; 30 | height: calc(100%/3); 31 | top: 0; 32 | bottom: 0; 33 | left: 0; 34 | right: 0; 35 | margin: auto; 36 | color: #000080; 37 | } 38 | // End of India 39 | 40 | // Start of Indonesia 41 | 42 | .indonesia { 43 | background: 44 | linear-gradient(to bottom, #CE1126 50%, white 50%); 45 | } 46 | 47 | // End of Indonesia 48 | 49 | // Start of Iran 50 | 51 | .iran { 52 | background: 53 | linear-gradient(to bottom, #239F40 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #DA0000 calc(100% / 3 * 2)); 54 | position: relative; 55 | } 56 | 57 | .iran:before { 58 | @include shape($content: '☫'); 59 | @include center; 60 | font-size: 44px; 61 | text-align: center; 62 | font-weight: bold; 63 | color: #DA0000; 64 | top: 22%; 65 | } 66 | 67 | // End of Iran 68 | 69 | // Start of Iraq 70 | 71 | .iraq { 72 | background: 73 | linear-gradient(to bottom, #CE1126 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2)); 74 | position: relative; 75 | } 76 | 77 | .iraq:before { 78 | @include shape($content: 'الله أكبر'); 79 | @include center; 80 | font-family: 'Cairo', sans-serif; 81 | font-size: 20px; 82 | text-align: center; 83 | font-weight: bold; 84 | color: #449D71; 85 | top: 36%; 86 | } 87 | 88 | // End of Iraq 89 | 90 | // Start of Ireland 91 | 92 | .ireland { 93 | background: 94 | linear-gradient(to right, #169B62 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #FF883E calc(100% / 3 * 2)); 95 | } 96 | 97 | // End of Ireland 98 | 99 | // Start of Israel 100 | 101 | .israel { 102 | background: 103 | linear-gradient(to bottom, transparent 15%, #0038B8 15%, #0038B8 30%, transparent 30%, transparent 70%, #0038B8 70%, #0038B8 85%, transparent 85%), 104 | white; 105 | position: relative; 106 | } 107 | 108 | .israel:before { 109 | @include shape($content: '✡'); 110 | @include center; 111 | text-align: center; 112 | top: 28%; 113 | font-size: 48px; 114 | font-weight: bold; 115 | -webkit-text-stroke: 1px #0038B8; 116 | color: #0038B8; 117 | } 118 | 119 | // End of Israel 120 | 121 | // Start of Italy 122 | 123 | .italy { 124 | background: 125 | linear-gradient(to right, #009246 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #CE2B37 calc(100% / 3 * 2)); 126 | } 127 | 128 | // End of Italy 129 | -------------------------------------------------------------------------------- /scss/flags/_c.scss: -------------------------------------------------------------------------------- 1 | // Start of Cameroon 2 | 3 | .cameroon { 4 | background: linear-gradient(to right, #007A5E, #007A5E calc(100% / 3), #CE1126 calc(100% / 3), #CE1126 calc(100% / 3 *2), #FCD116 calc(100% / 3 *2), #FCD116 100%); 5 | position: relative; 6 | } 7 | 8 | .cameroon:before { 9 | @include shape($content: '\2605'); 10 | @include center; 11 | text-align: center; 12 | color: #FCD116; 13 | font-size: 26px; 14 | top: 35%; 15 | } 16 | 17 | // End of Cameroon 18 | 19 | // Start of Central African Republic 20 | 21 | .central-african-republic { 22 | background: 23 | linear-gradient(to right, transparent 0%, transparent 42%, #D21034 42%, #D21034 58%, transparent 58%, transparent 100%), 24 | linear-gradient(to bottom, #003082, #003082 25%, white 25%, white 50%, #289728 50%, #289728 75%, #FFCE00 75%, #FFCE00 100% ); 25 | position: relative; 26 | } 27 | 28 | .central-african-republic:before { 29 | @include shape($content: '\2605'); 30 | @include center; 31 | color: #FFCE00; 32 | font-size: 22px; 33 | left: 15px; 34 | } 35 | // End of Central African Republic 36 | 37 | // Start of Chad 38 | 39 | .chad { 40 | background: 41 | linear-gradient(to right, #002664, #002664 calc(100% / 3), #FECB00 calc(100% / 3), #FECB00 calc(100% / 3 * 2), #C60C30 calc(100% / 3 * 2), #C60C30 100%); 42 | } 43 | 44 | // End of Chad 45 | 46 | // Start of Chile 47 | 48 | .chile { 49 | background: 50 | linear-gradient(to bottom, white, white 50%, #D52B1E 50%, #D52B1E 100%); 51 | position: relative; 52 | } 53 | 54 | .chile:after { 55 | @include shape($content: '\2605'); 56 | box-sizing: border-box; 57 | color: white; 58 | font-size: 26px; 59 | text-align: center; 60 | background: #0039A6; 61 | height: $half-height; 62 | width: 60px; 63 | left: 0; 64 | padding-top: 10px; 65 | } 66 | 67 | // End of Chile 68 | 69 | // Start of Colombia 70 | 71 | .colombia { 72 | background: 73 | linear-gradient(to bottom, #FCD116 0%, #FCD116 50%, #003893 50%, #003893 75%, #CE1126 75%, #CE1126 100%); 74 | } 75 | 76 | // End of Colombia 77 | 78 | // Start of Comoros 79 | 80 | .comoros { 81 | background: 82 | linear-gradient(146deg, #3D8E33 25%, transparent 15%) 0 -60px, 83 | linear-gradient(34deg, #3D8E33 25%, transparent 15%) 0 -60px, 84 | linear-gradient(to bottom, #FFC61E 0%, #FFC61E 25%, white 25%, white 50%, #CE1025 50%, #CE1126 75%, #3A75C4 75%, #3A75C4 100%); 85 | position: relative; 86 | background-size: 180px 120px; 87 | } 88 | 89 | .comoros:before { 90 | @include shape; 91 | @include makeCircle; 92 | height: 50px; 93 | width: 50px; 94 | left: 20px; 95 | top: 36px; 96 | box-shadow: -10px 0 0 0 white; 97 | } 98 | 99 | .comoros:after { 100 | @include shape($content: '★ ★ ★ ★'); 101 | color: white; 102 | width: 8px; 103 | font-size: 8px; 104 | top: 40px; 105 | left: 34px; 106 | } 107 | 108 | // End of Comoros 109 | 110 | // start of Costa Rica 111 | 112 | .costa-rica { 113 | background: 114 | linear-gradient(to bottom, #002A7F 15%, white 15%, white 35%, #CE1126 35%, #CE1126 65%, white 65%, white 85%, #002B7F 85%, #002B7F 100%); 115 | } 116 | 117 | // End of Costa Rica 118 | 119 | // Start of Cote d'Ivoire 120 | 121 | .cote-d-ivoire { 122 | background: 123 | linear-gradient(to right, #F77F00 calc(100% / 3), white calc(100% / 3), calc(100% / 3 * 2), #009E60 calc(100% / 3 * 2), #009E60 100%); 124 | } 125 | 126 | // End of Cote d'Ivoire 127 | 128 | // Start of Cuba 129 | 130 | .cuba { 131 | background: 132 | linear-gradient(146deg, #CF142B 25%, transparent 15%) 0 -60px, 133 | linear-gradient(34deg, #CF142B 25%, transparent 15%) 0 -60px, 134 | linear-gradient(to bottom, #002A8F 20%, white 20%, white 40%, #002A8F 40%, #002A8F 60%, white 60%, white 80%, #002A8F 80%, #002A8F 100%); 135 | background-size: 180px 120px; 136 | position: relative; 137 | } 138 | 139 | .cuba:before { 140 | @include shape($content: '★'); 141 | color: white; 142 | font-size: 24px; 143 | top: 42px; 144 | left: 20px; 145 | } 146 | 147 | // End of Cuba 148 | 149 | // Start of Czech Republic 150 | 151 | .czech-republic { 152 | background: 153 | linear-gradient(146deg, #11457E 25%, transparent 15%) 0 -60px, 154 | linear-gradient(34deg, #11457E 25%, transparent 15%) 0 -60px, 155 | linear-gradient(to bottom, white 50%, #D7141A 50%); 156 | background-size: 180px 120px; 157 | } 158 | 159 | // End of Czech Republic -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Single Div Pure CSS Flags 2 | ========================= 3 | 4 | [](https://CSSGrid.io/friend/DHANISH) [](https://Flexbox.io/friend/DHANISH) 5 | 6 | [Using the Library](#how-to-use-the-library) 7 | 8 | [Instructions for Developers](#instructions-for-developers) 9 | 10 |  11 | 12 | ## How to use the library 13 | 14 | Grab the compiled CSS from the `./dist` folder 15 | 16 | For the purpose of this personal project, first, I have an empty div with the class of "flag" 17 | 18 | ```HTML 19 |
20 | ``` 21 | The flag class contains these fixed properties 22 | ```CSS 23 | .flag { 24 | width: 180px; 25 | height: 120px; 26 | overflow: hidden; 27 | border: 1px solid #efefef; 28 | } 29 | ``` 30 | There is a class for each country that you can chain after the `.flag` class 31 | 32 | for example 33 | 34 | ```HTML 35 | 36 | ``` 37 | 38 | Most of the flags were not possible in a single div, so they are not included, but here are the ones that are: 39 | 40 | | Class Names | 41 | | ------------- | 42 | | .algeria | 43 | | .armenia | 44 | | .austria | 45 | | .azerbaijan | 46 | | .bahamas | 47 | | .bahrain | 48 | | .bangladesh | 49 | | .barbados | 50 | | .belgium | 51 | | .benin | 52 | | .bolivia | 53 | | .botswana | 54 | | .brazil | 55 | | .bulgaria | 56 | | .burkina-faso | 57 | | .burundi | 58 | | .cameroon | 59 | | .central-african-republic | 60 | | .chad | 61 | | .chile | 62 | | .colombia | 63 | | .comoros | 64 | | .costa-rica | 65 | | .cote-d-ivoire | 66 | | .cuba | 67 | | .czech-republic | 68 | | .democratic-republic-of-congo | 69 | | .denmark | 70 | | .djibouti | 71 | | .east-timor | 72 | | .estonia | 73 | | .finland | 74 | | .france | 75 | | .gabon | 76 | | .the-gambia | 77 | | .germany | 78 | | .ghana | 79 | | .greece | 80 | | .guinea | 81 | | .guinea-bissau | 82 | | .guyana | 83 | | .hungary | 84 | | .iceland | 85 | | .india | 86 | | .indonesia | 87 | | .iran | 88 | | .iraq | 89 | | .ireland | 90 | | .israel | 91 | | .italy | 92 | | .jamaica | 93 | | .japan | 94 | | .kuwait | 95 | | .laos | 96 | | .latvia | 97 | | .liberia | 98 | | .libya | 99 | | .lithuania | 100 | | .luxembourg | 101 | | .madagascar | 102 | | .malaysia | 103 | | .maldives | 104 | | .mali | 105 | | .mauritania | 106 | | .mauritius | 107 | | .monaco | 108 | | .myanmar | 109 | | .namibia | 110 | | .nauru | 111 | | .nepal | 112 | | .the-netherlands | 113 | | .niger | 114 | | .nigeria | 115 | | .north-korea | 116 | | .norway | 117 | | .pakistan | 118 | | .palau | 119 | | .panama | 120 | | .peru | 121 | | .phillippines | 122 | | .poland | 123 | | .qatar | 124 | | .republic-of-china | 125 | | .republic-of-congo | 126 | | .romania | 127 | | .russia | 128 | | .rwanda | 129 | | .saint-kitts-and-nevis | 130 | | .saint-lucia | 131 | | .sao-tome-and-principe | 132 | | .senegal | 133 | | .seychelles | 134 | | .sierra-leone | 135 | | .somalia | 136 | | .south-sudan | 137 | | .sudan | 138 | | .suriname | 139 | | .sweden | 140 | | .switzerland | 141 | | .syria | 142 | | .tanzania | 143 | | .thailand | 144 | | .togo | 145 | | .tonga | 146 | | .trinidad-and-tobago | 147 | | .tunisia | 148 | | .turkey | 149 | | .ukraine | 150 | | .uae | 151 | | .the-united-kingdom | 152 | | .vietnam | 153 | | .western-sahara | 154 | | .yemen | 155 | 156 | ## Instructions for Developers 157 | 158 | I am using Pug, Sass and [Parcel](https://github.com/parcel-bundler/parcel) 159 | 160 | ### Folder Structure is simple. 161 | 162 | ``` 163 | ├── node_modules 164 | ├── scss 165 | ├── flags 166 | ├── _a.scss 167 | | 168 | ├── all partials a - y 169 | | 170 | ├── _y.scss 171 | ├── _base.scss 172 | ├── _mixins.scss 173 | ├── _variables.scss 174 | ├── style.css 175 | ├── .gitignore 176 | ├── index.pug 177 | ├── package-lock.json 178 | ├── package.json 179 | ├── README.md 180 | ``` 181 | 182 | To install node modules run 183 | 184 | ``` 185 | npm install 186 | ``` 187 | 188 | I am using Parcel. 189 | 190 | ``` 191 | parcel index.pug 192 | ``` 193 | 194 | will start a local server and watch over sass and pug files 195 | 196 | ``` 197 | parcel build index.pug 198 | ``` 199 | will publish the build to `./dist` folder 200 | 201 | If you want to contribute, feel free to make a pull request. Or if you see any issues, you can open an issue. 202 | 203 | ---- 204 | 205 | Twitter: [@dhanishgajjar](https://twitter.com/dhanishgajjar) 206 | 207 | Instagram: [@dhanishgajjar](https://instagram.com/dhanishgajjar) 208 | -------------------------------------------------------------------------------- /scss/flags/_n.scss: -------------------------------------------------------------------------------- 1 | // Start of Namibia 2 | 3 | .namibia { 4 | background: 5 | linear-gradient(146deg,#003580 45%, white 45%, white 50%, #D21034 50%, #D21034 60%, white 60%, white 65%, #009543 65%); 6 | position: relative; 7 | } 8 | 9 | .namibia:before { 10 | @include shape($content: '✹'); 11 | color: #FFCE00; 12 | font-size: 64px; 13 | left: 10px; 14 | } 15 | 16 | .namibia:after { 17 | @include shape; 18 | @include makeCircle; 19 | height: 24px; 20 | width: 24px; 21 | background: #FFCE00; 22 | border: 3px solid #003580; 23 | top: 22px; 24 | left: 20px; 25 | } 26 | 27 | // End of Namibia 28 | 29 | // Start of Nauru 30 | 31 | .nauru { 32 | background: 33 | linear-gradient(to bottom, transparent 45%, #FFC61E 45%, #FFC61E 55%, transparent 55% ), 34 | #002B7F; 35 | position: relative; 36 | } 37 | 38 | .nauru:before { 39 | @include shape($content: '✹'); 40 | color: white; 41 | font-size: 44px; 42 | left: 30px; 43 | top: 60px; 44 | } 45 | 46 | // End of Nauru 47 | 48 | // Start of Nepal 49 | 50 | .nepal { 51 | background: 52 | radial-gradient(44px at 16% 34%, #DC1038 0, #DC143C 35%, transparent 35%, transparent 100%), 53 | radial-gradient(44px at 16% 39%, white 0, white 35%, transparent 35%, transparent 100%), 54 | linear-gradient(40deg, #DC143C 30%, transparent 30%) 4px -6px, 55 | linear-gradient(33deg, #DC143C 25%, transparent 25%) 4px -54px, 56 | linear-gradient(40deg, #003893 36%, transparent 32%), 57 | linear-gradient(33deg, #003893 30%, transparent 25%) 0px -50px; 58 | background-size: 180px 120px; 59 | position: relative; 60 | } 61 | 62 | .nepal:before { 63 | @include shape($content: '✹'); 64 | color: white; 65 | font-size: 48px; 66 | bottom: 4px; 67 | left: 10px; 68 | } 69 | 70 | .nepal:after { 71 | @include shape($content: '✹'); 72 | color: white; 73 | font-size: 28px; 74 | top: 36px; 75 | left: 18px; 76 | } 77 | 78 | // End of Nepal 79 | 80 | // Start of Netherlands 81 | 82 | .the-netherlands { 83 | background: 84 | linear-gradient(to bottom, #AE1C28 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #21468B calc(100% / 3 * 2)); 85 | } 86 | 87 | // End of Netherlands 88 | 89 | // Start of New Zealand 90 | 91 | .new-zealand { 92 | background: 93 | #00247D; 94 | background-size: 100px 100px; 95 | position: relative; 96 | } 97 | 98 | .new-zealand:before { 99 | @include shape; 100 | top: 0; 101 | left: 0; 102 | background: 103 | linear-gradient(to bottom, transparent 40%, #CC142B 40%, #CC142B 60%, transparent 60% ), 104 | linear-gradient(to right, transparent 45%, #CC142B 45%, #CC142B 55%, transparent 55% ), 105 | linear-gradient(to bottom, transparent 35%, white 35%,white 65%, transparent 65%), 106 | linear-gradient(to right, transparent 40%, white 40%,white 60%, transparent 60%), 107 | linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -45px 31px, 108 | linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 46px -35px, 109 | linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -51px -31px, 110 | linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 48px 32px, 111 | linear-gradient(146deg, transparent 45%, white 45%, white 55%, transparent 55%), 112 | linear-gradient(34deg, transparent 45%, white 45%, white 55%, transparent 55%); 113 | background-size: 90px 60px; 114 | width: 90px; height: 60px; 115 | background-repeat: no-repeat; 116 | } 117 | 118 | // End of New Zealand 119 | 120 | // Start of Niger 121 | 122 | .niger { 123 | background: 124 | radial-gradient(50px at 50% 50%, #E05206 0, #E05206 35%, transparent 35%, transparent 100%), 125 | linear-gradient(to bottom, #E05206 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #0DB02B calc(100% / 3 * 2)); 126 | } 127 | 128 | // End of Niger 129 | 130 | // Start of Nigeria 131 | 132 | .nigeria { 133 | background: 134 | linear-gradient(to right, #008751 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #008751 calc(100% / 3 * 2)); 135 | } 136 | 137 | // End of Nigeria 138 | 139 | // Start of North Korea 140 | 141 | .north-korea { 142 | background: 143 | radial-gradient(80px at 35% 50%, white, white 35%, transparent 35%, transparent 100%), 144 | linear-gradient(to bottom, #024FA2 15%, white 15%, white 20%, #ED1C27 20%, #ED1C27 80%, white 80%, white 85%, #024FA2 85% ); 145 | position: relative; 146 | } 147 | 148 | .north-korea:before { 149 | @include shape($content: '★'); 150 | color: #ED1C27; 151 | font-size: 48px; 152 | left: 38px; top: 23px; 153 | } 154 | 155 | // End of North Korea 156 | 157 | // Start of Norway 158 | 159 | .norway { 160 | background: 161 | linear-gradient(to bottom, transparent 43%, #002868 43%, #002868 54%, transparent 54%), 162 | linear-gradient(to right, transparent 28%, #002868 28%, #002868 37%, transparent 37%), 163 | linear-gradient(to right, transparent 25%, white 25%, white 40%, transparent 40%), 164 | linear-gradient(to bottom, transparent 38%, white 38%, white 59%, transparent 59%), 165 | #EF2B2D; 166 | } 167 | 168 | // End of Norway -------------------------------------------------------------------------------- /scss/flags/_b.scss: -------------------------------------------------------------------------------- 1 | // Start of Bahamas 2 | 3 | .bahamas { 4 | background: 5 | linear-gradient(146deg, black 25%, transparent 15%) 0 -60px, 6 | linear-gradient(34deg, black 25%, transparent 15%) 0 -60px, 7 | linear-gradient(to bottom, #00ABC9, #00ABC9 calc(100% / 3), #FAE042 calc(100% / 3), #FAE042 calc(100% / 3 * 2), #00ABC9 calc(100% / 3 * 2), #00ABC9 100%); 8 | background-size: 180px 120px; 9 | } 10 | 11 | // End of Bahamas 12 | 13 | // start of Bahrain 14 | 15 | .bahrain { 16 | background: linear-gradient(90deg, white, white 25%, #CE1126 25%, #CE1126 100%); 17 | position: relative; 18 | } 19 | 20 | .bahrain:before { 21 | @include shape; 22 | width: 24px; 23 | height: 100%; 24 | background: 25 | linear-gradient(154deg, white 32%, transparent 31%) 0 12px, 26 | linear-gradient(24deg, white 32%, transparent 31%) 0 36px; 27 | background-size: 24px 24px; 28 | left: 44px; 29 | top: 0; 30 | } 31 | 32 | // start of Bahrain 33 | 34 | // Start of Bangladesh 35 | 36 | .bangladesh { 37 | background: 38 | radial-gradient(110px at 40% 50%, #F42A41 0, #F42A41 35%, transparent 35%, transparent 100%), 39 | #006A4E; 40 | } 41 | 42 | // End of Bangladesh 43 | 44 | // Start of Barbados 45 | 46 | .barbados { 47 | background: linear-gradient(to right, #00267F, #00267F calc(100% / 3), #FFC726 calc(100% / 3), #FFC726 calc(100% / 3 *2), #00267F calc(100% / 3 *2), #00267F 100%); 48 | position: relative; 49 | } 50 | 51 | .barbados:before { 52 | @include shape($content: "♆"); 53 | font-size: 3em; 54 | left: calc(50% - 18px); 55 | top: 26px; 56 | } 57 | 58 | // End of Barbados 59 | 60 | // Start of Belgium 61 | 62 | .belgium { 63 | background: linear-gradient(to right, black, black calc(100% / 3), #FAE042 calc(100% / 3), #FAE042 calc(100% / 3 *2), #ED2939 calc(100% / 3 *2), #ED2939 100%); 64 | } 65 | 66 | // End of Belgium 67 | 68 | // Start of Benin 69 | 70 | .benin { 71 | background: 72 | linear-gradient(to right, #008751, #008751 40%, transparent 40%, transparent 100%), 73 | linear-gradient(to bottom, #FCD116, #FCD116 50%, #E8112D 50%, #E8112D 100%); 74 | } 75 | 76 | // End of Benin 77 | 78 | // Start of Bolivia 79 | 80 | .bolivia { 81 | background: linear-gradient(to bottom, #D52B1E, #D52B1E calc(100% / 3), #FFE000 calc(100% / 3), #FFE000 calc(100% / 3 *2), #007934 calc(100% / 3 *2), #007934 100%); 82 | } 83 | 84 | // End of Bolivia 85 | 86 | // Start of Botswana 87 | 88 | .botswana { 89 | background: linear-gradient(0deg, #75AADB, #75AADB 35%, white 35%, white 40%, black 40%, black 60%, white 60%, white 65%, #75AADB 65%, #75AADB 100%); 90 | } 91 | 92 | // End of Botswana 93 | 94 | // Start of Brazil 95 | 96 | .brazil { 97 | background: 98 | linear-gradient(149deg, #009B3A 30%, transparent 25%), 99 | linear-gradient(-149deg, #009B3A 30%, transparent 25%), 100 | linear-gradient(-30deg, #009B3A 30%, transparent 25%), 101 | linear-gradient(30deg, #009B3A 30%, transparent 25%), 102 | radial-gradient(90px at 50% 50%, transparent 0, transparent 35%, #FEDF00 35%, #FEDF00 100%), 103 | radial-gradient(180px at 40% 96%, transparent 0, transparent 35%, white 35%, white 39%, transparent 39%, transparent 100%), 104 | #002776; 105 | overflow: hidden; 106 | } 107 | 108 | // End of Brazil 109 | 110 | // Start of Bulgaria 111 | 112 | .bulgaria { 113 | background: linear-gradient(to bottom, white, white calc(100% / 3), #00966E calc(100% / 3), #00966E calc(100% / 3 *2), #D62612 calc(100% / 3 *2), #D62612 100%); 114 | } 115 | 116 | // End of Bulgaria 117 | 118 | // Start of Burkina Faso 119 | 120 | .burkina { 121 | background: linear-gradient(to bottom, #EF2B2D, #EF2B2D 50%, #009E49 50%, #009E49 100%); 122 | position: relative; 123 | } 124 | 125 | .burkina:after { 126 | @include shape($content: '\2605'); 127 | @include center; 128 | text-align: center; 129 | top: calc(50% - 26px); 130 | font-size: 36px; 131 | color: #FCD116; 132 | } 133 | 134 | // End of Burkina Faso 135 | 136 | // Start of Burundi 137 | 138 | .burundi { 139 | background: 140 | radial-gradient(100px at 50% 50%, white 0, white 35%, transparent 35%, transparent 100%), 141 | linear-gradient(146deg, #CE1126 20%, transparent 15%) 90px -118px, 142 | linear-gradient(-146deg, #CE1126 20%, transparent 15%) 90px -118px, 143 | linear-gradient(-34deg, #CE1126 20%, transparent 15%) 90px 118px, 144 | linear-gradient(34deg, #CE1126 20%, transparent 15%) 90px 118px, 145 | linear-gradient(146deg, #1EB53A 20%, transparent 15%) 0 -60px, 146 | linear-gradient(34deg, #1EB53A 20%, transparent 15%) 0 -60px, 147 | linear-gradient(-146deg, #1EB53A 20%, transparent 15%) 180px -60px, 148 | linear-gradient(-34deg, #1EB53A 20%, transparent 15%) 180px -60px, 149 | #FFFFFF; 150 | position: relative; 151 | } 152 | 153 | .burundi:before { 154 | @include shape($content: '✶'); 155 | font-size: 18px; 156 | -webkit-text-stroke: .5px #1EB53A; 157 | width: 180px; 158 | height: 120px; 159 | text-align: center; 160 | top: 36px; 161 | color: #CE1126; 162 | } 163 | 164 | .burundi:after { 165 | @include shape($content: "✶\00a0 \00a0 \00a0 ✶"); 166 | font-size: 18px; 167 | -webkit-text-stroke: .5px #1EB53A; 168 | width: 180px; 169 | height: 120px; 170 | text-align: center; 171 | top: 60px; 172 | color: #CE1126; 173 | } 174 | // End of Burundi -------------------------------------------------------------------------------- /scss/flags/_s.scss: -------------------------------------------------------------------------------- 1 | // Start of Saint Kitts and Nevis 2 | 3 | .saint-kitts-and-nevis { 4 | background: 5 | linear-gradient(145deg,#009E49 35%, #FCD116 35%, #FCD116 40%, black 40%, black 60%, #FCD116 60%, #FCD116 65%, #CE1126 65%); 6 | position: relative; 7 | } 8 | 9 | .saint-kitts-and-nevis:before, .saint-kitts-and-nevis:after { 10 | @include shape($content: '★'); 11 | color: white; 12 | font-size: 30px; 13 | transform: rotate(42deg); 14 | } 15 | 16 | .saint-kitts-and-nevis:before { 17 | right: 40px; 18 | top: 16px; 19 | } 20 | 21 | .saint-kitts-and-nevis:after { 22 | left: 40px; 23 | top: 62px; 24 | } 25 | 26 | // End of Saint Kitts and Nevis 27 | 28 | // Start of Saint Lucia 29 | 30 | .saint-lucia { 31 | background: 32 | linear-gradient(-45deg, #FCD116 14%, transparent 0) -89px -10px, 33 | linear-gradient(45deg, #FCD116 14%, transparent 0) 89px -10px, 34 | linear-gradient(-65deg, black 16%, transparent 0) -89px -10px, 35 | linear-gradient(65deg, black 16%, transparent 0) 89px -10px, 36 | linear-gradient(-65deg, white 18%, transparent 0) -89px -10px, 37 | linear-gradient(65deg, white 18%, transparent 0) 89px -10px, 38 | #66CCFF; 39 | } 40 | 41 | // End of Saint Lucia 42 | 43 | // Start of Sao Tome and Principe 44 | 45 | .sao-tome-and-principe { 46 | background: 47 | linear-gradient(135deg, #D21034 20%, transparent 0) 0 -60px, 48 | linear-gradient(45deg, #D21034 20%, transparent 0) 0 -60px, 49 | linear-gradient(to bottom,#12AD2B calc(100% / 3), #FFCE00 calc(100% / 3), #FFCE00 calc(100% / 3 * 2), #12AD2B calc(100% / 3 * 2)); 50 | background-size: 180px 120px; 51 | position: relative; 52 | } 53 | 54 | .sao-tome-and-principe:before { 55 | @include shape($content: '★\00a0 \00a0 ★'); 56 | color: black; 57 | font-size: 30px; 58 | right: 12px; 59 | top: 38px; 60 | } 61 | 62 | // End of Sao Tome and Principe 63 | 64 | // Start of Senegal 65 | 66 | .senegal { 67 | background: 68 | linear-gradient(to right, #00853F calc(100% / 3), #FDEF42 calc(100% / 3), #FDEF42 calc(100% / 3 * 2), #E31B23 calc(100% / 3 * 2)); 69 | position: relative; 70 | } 71 | 72 | .senegal:before { 73 | @include shape($content: '★'); 74 | @include center; 75 | text-align: center; 76 | color: #00853F; 77 | font-size: 36px; 78 | top: 30%; 79 | } 80 | 81 | // End of Senegal 82 | 83 | // Start of Seychelles 84 | 85 | .seychelles { 86 | background: 87 | linear-gradient(170deg, transparent 79%, #007A3D 55%), 88 | linear-gradient(160deg, transparent 65%, white 45%), 89 | linear-gradient(141deg, transparent 45%, #D62828 45%), 90 | linear-gradient(120deg, transparent 27%, #FCD856 25%), 91 | #003F87; 92 | } 93 | 94 | // End of Seychelles 95 | 96 | // Start of Sierra Leone 97 | 98 | .sierra-leone { 99 | background: 100 | linear-gradient(to bottom, #1EB53A calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), #0072C6 calc(100% / 3 * 2)); 101 | } 102 | 103 | // End of Sierra Leone 104 | 105 | // Start of Somalia 106 | 107 | .somalia { 108 | background: #4189DD; 109 | position: relative; 110 | } 111 | 112 | .somalia:before { 113 | @include shape($content: '★'); 114 | @include center; 115 | text-align: center; 116 | color: white; 117 | font-size: 44px; 118 | top: 24px; 119 | } 120 | 121 | // End of Somalia 122 | 123 | // Start of South Sudan 124 | 125 | .south-sudan { 126 | background: 127 | linear-gradient(146deg, #0F47AF 25%, transparent 0) 0 -60px, 128 | linear-gradient(34deg, #0F47AF 25%, transparent 0) 0 -60px, 129 | linear-gradient(to bottom,black 30%, white 30%, white 35%, #DA121A 35%, #DA121A 65%, white 65%, white 70%,#078930 70%); 130 | background-size: 180px 120px; 131 | position: relative; 132 | } 133 | 134 | .south-sudan:before { 135 | @include shape($content: '★'); 136 | color: #FCDD09; 137 | font-size: 30px; 138 | top: 38px; 139 | left: 18px; 140 | transform: rotate(45deg); 141 | } 142 | 143 | // End of South Sudan 144 | 145 | // Start of Sudan 146 | 147 | .sudan { 148 | background: 149 | linear-gradient(148deg, #007229 25%, transparent 0) 0 -60px, 150 | linear-gradient(33deg, #007229 25%, transparent 0) 0 -60px, 151 | linear-gradient(to bottom, #D21034 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2)); 152 | background-size: 180px 120px; 153 | } 154 | 155 | // End of Sudan 156 | 157 | // Start of Suriname 158 | 159 | .suriname { 160 | background: 161 | linear-gradient(to bottom, #377E3F 20%, white 20%, white 30%, #B40A2D 30%, #B40A2D 70%, white 70%, white 80%, #377E3F 80%); 162 | position: relative; 163 | } 164 | 165 | .suriname:before { 166 | @include shape($content: '★'); 167 | @include center; 168 | text-align: center; 169 | color: #ECC81D; 170 | font-size: 40px; 171 | top: 31px; 172 | } 173 | 174 | // End of Suriname 175 | 176 | // Start of Sweden 177 | 178 | .sweden { 179 | background: 180 | linear-gradient(to right, transparent 30%, #FECC00 30%, #FECC00 45%, transparent 0), 181 | linear-gradient(to bottom, transparent 38%, #FECC00 38%, #FECC00 59%, transparent 0), 182 | #006AA7; 183 | } 184 | 185 | // End of Sweden 186 | 187 | // Start of Switzerland 188 | 189 | .switzerland { 190 | background: 191 | linear-gradient(to bottom, transparent calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), transparent 0), 192 | linear-gradient(to right, transparent calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), transparent 0), 193 | #FF0000; 194 | background-size: 80px 80px; 195 | background-repeat: no-repeat; 196 | background-position: 50px 20px; 197 | } 198 | 199 | // End of Switzerland 200 | 201 | // Start of Syria 202 | 203 | .syria { 204 | background: 205 | linear-gradient(to bottom, #CE1126 calc(100% / 3), white calc(100% / 3), white calc(100% / 3 * 2), black calc(100% / 3 * 2)); 206 | position: relative; 207 | } 208 | 209 | .syria:before { 210 | @include shape($content: '★\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 ★'); 211 | @include center; 212 | text-align: center; 213 | color: #007A3D; 214 | font-size: 26px; 215 | top: 40px; 216 | } 217 | 218 | // End of Syria -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 |