How to create the Bangladesh flag using HTML and CSS

You know the basics of HTML and CSS, and now you want to create the Bangladesh flag using HTML and CSS. You can easily create the Bangladesh flag using HTML and CSS.

In this article, I will show you how you can do that. Just follow my steps and you will find yourself with a Bangladesh flag created using HTML and CSS.

Draw Bangladesh Flag Using HTML & CSS

1. Create an HTML file

First, you have to create an HTML file. You can do this however you want. If you know the basics of HTML, it should be very easy to do for you.

Read More: Vim on Sublime Text 3

2. Write the HTML Code

Now, we will write the HTML code in the HTML file. You can copy-paste the following code writer by me, otherwise, you can also write the whole code yourself.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tech View 71</title>
  <div class="bangladesh"></div>

Here we created a div with a class name. The class name is “bangladesh”. You can give any name. It’s on to you.

3. Write the CSS Code

Now, we will write the CSS code. You can copy and paste the following code or you can write the code.

.flag {
    height: 300px;
    width: 500px;
    background-color: #006a4e;
    position: relative;

.circle {
    height: 150px;
    width: 150px;
    background-color: #f42a41;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

.line {
    height: 25px;
    width: 500px;
    background-color: #f42a41;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

Save the CSS file with any name you like, for example, “style.css”.

4. Link the CSS file to the HTML file

Link the CSS file to the HTML file by adding the following code to the head section of the HTML file:

<link rel="stylesheet" type="text/css" href="style.css">

Open the HTML file in your web browser to see the Bangladesh flag.

The Result

bangladesh flag

What is your reaction?

In Love
Not Sure

Leave a reply

Your email address will not be published. Required fields are marked *