Overview
Drawing the national flag of Nepal using HTML and CSS is an exciting way to showcase your creativity and learn web development skills. In this tutorial, we will guide you through the process of creating the iconic Nepali flag, with its unique shape and vibrant colors, using simple HTML markup and CSS styling. By following these step-by-step instructions, you will be able to create an accurate representation of the Nepali flag on your web page.
Table of Contents
index.html (HTML file):
<!DOCTYPE html>
<html>
<head>
<title>Nepal Flag</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="nepal-flag">
<div class="blue_border">
<div class="outer-triangle-top"></div>
<div class="outer-triangle-bottom"></div>
</div>
<div class="red_flag">
<div class="inner-triangle-top"></div>
<div class="inner-triangle-bottom"></div>
</div>
<div id="moon">
<div class="shape"></div>
<div class="star"></div>
</div>
<div id="sun"></div>
</div>
</body>
</html>
styles.css (CSS file):
#nepal-flag {
width: 400px;
margin: 40px auto;
position: relative;
}
/* Blue border */
.outer-triangle-top,
.outer-triangle-bottom {
width: 0;
height: 0;
border-bottom: 250px solid #0060a9;
border-right: 250px solid transparent;
position: relative;
}
.outer-triangle-top {
border-bottom: 202px solid #0060a9;
}
.outer-triangle-bottom {
top: -103px;
border-bottom: 300px solid #0060a9;
border-right: 300px solid transparent;
}
/* Red flag */
.red_flag {
left: 14px;
position: absolute;
top: 30px;
z-index: 9;
}
.inner-triangle-top,
.inner-triangle-bottom {
width: 0;
height: 0;
border-bottom: 200px solid #ef3e33;
border-right: 200px solid transparent;
position: relative;
}
.inner-triangle-top {
border-bottom: 159px solid #ef3e33;
}
.inner-triangle-bottom {
border-bottom: 253px solid #ef3e33;
border-right: 251px solid transparent;
top: -55px;
}
/* Moon */
#moon {
position: absolute;
left: 30px;
top: 103px;
z-index: 11;
}
.shape {
background: #fff;
width: 70px;
height: 70px;
border-radius: 35px;
position: relative;
}
.shape:after {
background: #ef3e33;
border-radius: 35px;
content: "";
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 70px;
}
.star {
background: #fff;
height: 40px;
left: 15px;
position: absolute;
top: 19px;
width: 40px;
z-index: 10;
}
.star:before {
height: 40px;
width: 40px;
background: #fff;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.star:after {
height: 40px;
width: 40px;
background: #fff;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
/* Sun */
#sun {
background: #fff;
height: 58px;
left: 50px;
position: absolute;
top: 277px;
width: 58px;
z-index: 10;
}
#sun:before {
height: 58px;
width: 58px;
background: #fff;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#sun:after {
height: 58px;
width: 58px;
background: #fff;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Output:
Step 1: Setting Up the HTML Structure
Begin by creating a new HTML file and establishing the fundamental structure. Start with the essential <!DOCTYPE html> declaration, followed by opening and closing <html> tags. Within the <html> tags, include the necessary <head> and <body> sections.
Step 2: Incorporating the CSS File
Create a separate CSS file named “styles.css” and link it to your HTML file. Insert the <link> tag within the <head> section, using the rel attribute with a value of “stylesheet” and the href attribute pointing to the “styles.css” file.
Step 3: Designing the Flag
Inside the <body> section of your HTML file, create a container <div> element with an id of “nepal-flag.” This container will serve as the foundation for our flag design.
Step 4: Creating the Blue Border
Within the “nepal-flag” <div>, add two additional <div> elements with class names “outer-triangle-top” and “outer-triangle-bottom.” These elements will form the blue border of the Nepali flag. Utilize CSS styles to generate the triangular shapes, ensuring the color is set to “#0060a9,” representing the blue hue of the flag.
Step 5: Incorporating the Red Flag
Inside the “nepal-flag” <div>, include another <div> element with a class name of “red_flag.” This element will represent the red portion of the Nepali flag. Apply suitable CSS styles to create the triangular shape and set the color to “#ef3e33,” signifying the red color of the flag.
Step 6: Including the Moon and Star
Within the “nepal-flag” <div>, create an additional <div> element with an id of “moon.” This element will symbolize the moon depicted on the Nepali flag. Apply CSS styles to produce the moon’s shape, combining a circular shape (using the “shape” class) and a star shape (using the “star” class). Adjust the positioning and colors to align with the flag’s design.
Step 7: Adding the Sun
Finally, add one more <div> element with an id of “sun” inside the “nepal-flag” <div>. This element will represent the sun symbol on the Nepali flag. Utilize CSS styles to create the sun’s shape, similar to the moon, incorporating appropriate positioning and colors.
Step 8: Finalizing the Design
With the HTML structure and CSS styles implemented, you have successfully drawn the Nepali flag using HTML and CSS. Feel free to adjust the dimensions, colors, and positioning to match your preferred design.
Python
def generate_triangle_shape(n):
for i in range(n):
for k in range(i + 1):
print('*', end=' ')
print()
def generate_pole_shape(n):
for i in range(n):
print('*')
row = int(input('Enter the number of rows: '))
# Generating the flag of Nepal
generate_triangle_shape(row)
generate_triangle_shape(row)
generate_pole_shape(row)
Output:
Enter the number of rows: 5
*
* *
* * *
* * * *
* * * * *
*
* *
* * *
* * * *
* * * * *
C
#include <stdio.h>
// Function to generate Triangle Shape
void generateTriangleShape(int n) {
for (int i = 0; i < n; i++) {
for (int k = 0; k <= i; k++) {
printf("* ");
}
printf("\n");
}
}
// Function to generate Pole Shape
void generatePoleShape(int n) {
for (int i = 0; i < n; i++) {
printf("*\n");
}
}
int main() {
int row;
printf("Enter the number of rows: ");
scanf("%d", &row);
// Generating the flag of Nepal
generateTriangleShape(row);
generateTriangleShape(row);
generatePoleShape(row);
return 0;
}
C++
#include <iostream>
// Function to generate Triangle Shape
void generateTriangleShape(int n) {
for (int i = 0; i < n; i++) {
for (int k = 0; k <= i; k++) {
std::cout << "* ";
}
std::cout << std::endl;
}
}
// Function to generate Pole Shape
void generatePoleShape(int n) {
for (int i = 0; i < n; i++) {
std::cout << "*" << std::endl;
}
}
int main() {
int row;
std::cout << "Enter the number of rows: ";
std::cin >> row;
// Generating the flag of Nepal
generateTriangleShape(row);
generateTriangleShape(row);
generatePoleShape(row);
return 0;
}
