Simple CSS Flag

Developer
Joni Trythall
Size
2,518 Kb
Views
16,192
  1. Simple CSS Flag Previews
  2. Simple CSS Flag HTML Codes
  3. Simple CSS Flag CSS Codes

How do I make an simple css flag?

Inspired by illustration on this site: http://www.bigapplehotdogs.com. What is a simple css flag? How do you make a simple css flag? This script and codes were developed by Joni Trythall on 02 October 2022, Sunday.

Simple CSS Flag Previews
IQ Test

Simple CSS Flag - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS Flag</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='contain-flag'> <div class='pole'></div> <div class='flag'></div> <div class='shadow'></div> <div class='flag flag-2'></div>
</div>
</body>
</html>

Simple CSS Flag - Script Codes CSS Codes

body { background-color: #c4edf7;
}
.contain-flag { position: relative; margin-left: 40%; margin-top: 70px;
}
.pole { background-color: gray; border: 1px solid #636262; border-radius: 10px; width: 10px; height: 300px;
}
.pole:before { position: absolute; top: -14px; left: -5px; display: block; background-color: gray; border-radius: 50%; border: 1px solid #636262; width: 20px; height: 20px; content: '';
}
.flag { position: absolute; top: 8px; z-index: 10; background-color: #eb573b; border: 1px solid #d64b38; width: 150px; height: 90px;
}
.shadow { position: absolute; top: 70px; left: 90px; z-index: 4; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 32px solid transparent; border-left: 62px solid #c14333;
}
.flag-2 { position: absolute; top: 40px; left: 90px; z-index: 1; background-color: #eb573b; width: 150px; height: 90px;
}
.flag-2:after { position: absolute; left: 100px; top: -15px; display: block; width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-right: 60px solid #c4edf7; content: '';
}
Simple CSS Flag - Script Codes
Simple CSS Flag - Script Codes
Home Page Home
Developer Joni Trythall
Username jonitrythall
Uploaded October 02, 2022
Rating 4
Size 2,518 Kb
Views 16,192
Do you need developer help for Simple CSS Flag?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joni Trythall (jonitrythall) Script Codes
Name
Meat Selection
Brian The CSS Bee
Unite Loader
Blurred Gear Loader
Bounce Delay Loader
Flexbox Tinkering
CSS Pencil Scoop Logo
Solar Eclipse Loader
Animated Shopping Cart Icons
Weird Circle Loader
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!