Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create the Indian Flag using HTML and CSS
We know that HTML and CSS are the languages used for the web and its design, but we can do much more than just making web apps. For example, we can also use them to make a fun project which will require significant knowledge of both these languages.
So, the task at hand is to use HTML and CSS to create Indian Flag. Any flag we wish to create, no matter what type of flag it is, will have two parts: first being the pole, the second being the flag itself. As we know that it is actually quite simple for us to add colors to rectangular DIVs and make the tricolor section of the flag, the tricky part will be to make the wheel.
So, the approach would be to use a container element that will hold the entire flag. This will be separated into two parts one pole and the flag. The flag part will contain three elements each representing the respective color from top to bottom. The middle element among these three elements will act as the container element for the wheel.
Let us move on to creating the flag.
The Outer Container
As we discussed, the outer container is what will hold the entire flag (flag and pole part). We will use a div tag and give it a class of “container”. Two divs will be nested in this div tag, one for the pole and one for the flag.
Now the problem is that we want both these divs to be inline, so we will make use of display flex property to achieve that. After that we will specify the width and height as well as the colors for the elements.
The html part of the code will look like −
<div class="container"> <div class="polePart"></div> <div class="flagPart"></div> </div>
The CSS part will be −
.container {
display: flex;
}
.polePart {
height: 800px;
width: 11.111px;
background: brown;
border-top-left-radius: 12px;
}
.flagPart {
width: 450px;
height: 300px;
box-shadow: 0px 0px 90px 1px rgb(129, 115, 129);
background-color: transparent;
position: relative;
}
Adding the Three Colors
Now we will start adding the three colors of the tricolor. For that we will use three nested divs in the flagPart. We will then start by giving them appropriate width and height, all equal to one another, followed by assigning them their respective background colors. The first div will have the color saffron as its background, the middle one will have white and the bottom one will have green as its background color.
HTML Part −
<body> <div class="topColor"></div> <div class="middleColor"></div> <div class="bottomColor"></div> </body>
CSS Part −
.topColor {
height: 100px;
background-color: #ff9933
}
.middleColor {
height: 100px;
background-color: white
}
.bottomColor {
height: 100px;
background-color: green
}
Note that we do not need to specify the width of the inner divs as we need them to extend all the way to the size of the parent div, i.e., the div with the class middleColor.
Adding the Wheel
Now we will add the wheel inside the middle part, we know that there are twenty-four spokes in the wheel, this is why we will be using 12 lines and use CSS to rotate them in angles such that they form a circle.
Note that this will only form the spokes, for the circular portion of the wheel we will be using the “border-radius” property of the wheel container.
HTML Part −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="wheelPart">
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
</div>
</body>
</html>
CSS Part −
.wheelPart {
height: 99px;
width: 99px;
border: 1px solid darkblue;
border
-radius: 100px;
position: relative;
margin: 0 auto
}
.wheelPart .spokeLine {
height: 100%;
width: 1px;
display: inline
-block;
position: absolute;
left: 50%;
background: darkblue;
}
.spokeLine:nth
-child(1) {
transform: rotate(15deg)
}
.spokeLine:nth
-child(2) {
transform: rotate(30deg)
}
.spokeLine:nth
-child(3) {
transform: rotate(45deg)
}
.spokeLine:nth
-child(4) {
transform: rotate(60deg)
}
.spokeLine:nth
-child(5) {
transform: rotate(75deg)
}
.spokeLine:nth
-child(6) {
transform: rotate(90deg)
}
.spokeLine:nth-child(7) {
transform: rotate(105deg)
}
.spokeLine:nth-child(8) {
transform: rotate(120deg)
}
.spokeLine:nth-child(9) {
transform: rotate(135deg)
}
.spokeLine:nth-child(10) {
transform: rotate(150deg)
}
.spokeLine:nth-child(11) {
transform: rotate(165deg)
}
.spokeLine:nth-child(12) {
transform: rotate(180deg)
}
We used the nth-child pseudo class to rotate each line by 15 degrees as 12 lines rotated at 15 degrees from the center will form 24 spokes. The nth child pseudo class is used to match the child elements of a container specified in the number within braces.
What we have created is just a simple looking flag, but we can do much more using the advanced knowledge of CSS. Using animations, we can make it so that the flag appears to be waving in wind or moving the wheel but we shall not dive into that in this article.
Example
Following is the complete working example of the above -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.container {
display: flex;
}
.polePart {
height: 800px;
width: 11.111px;
background: brown;
border-top-left-radius: 12px;
}
.flagPart {
width: 450px;
height: 300px;
box-shadow: 0px 0px 90px 1px rgb(129, 115, 129);
background-color: transparent;
position: relative;
}
.topColor {
height: 100px;
background-color: #ff9933
}
.middleColor {
height: 100px;
background-color: white
}
.bottomColor {
height: 100px;
background-color: green
}
.wheelPart {
height: 99px;
width: 99px;
border: 1px solid darkblue;
border-radius: 100px;
position: relative;
margin: 0 auto;
}
.wheelPart .spokeLine {
height: 100%;
width: 1px;
display: inline-block;
position: absolute;
left: 50%;
background: darkblue;
}
.spokeLine:nth
-child(1) {
transform: rotate(15deg)
}
.spokeLine:nth
-child(2) {
transform: rotate(30deg)
}
.spokeLine:nth
-child(3) {
transform: rotate(45deg)
}
.spokeLine:nth
-child(4) {
transform: rotate(60deg)
}
.spokeLine:nth
-child(5) {
transform: rotate(75deg)
}
.spokeLine:nth
-child(6) {
transform: rotate(90deg)
}
.spokeLine:nth
-child(7) {
transform: rotate(105deg)
}
.spokeLine:nth
-child(8) {
transform: rotate(120deg)
}
.spokeLine:nth
-child(9) {
transform: rotate(135deg)
}
.spokeLine:nth-child(10) {
transform: rotate(150deg)
}
.spokeLine:nth-child(11) {
transform: rotate(165deg)
}
.spokeLine:nth-child(12) {
transform: rotate(180deg)
}
</style>
</head>
<body>
<div class="container">
<div class="polePart"></div>
<div class="flagPart">
<div class="topColor"></div>
<div class="middleColor">
<div class="wheelPart">
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
</div>
</div>
<div class="bottomColor"></div>
</div>
</div>
</body>
</html>
Conclusion
In this article we saw how we can make use of HTML and CSS to create the Indian flag, tricolor, we saw that we can use the properties found in CSS like background-color, border, border-radius, transform etc. to create a beautiful looking flag.
7K+ Views
To Continue Learning Please Login