Sun Aug 14 2022

How to Draw Indian National Flag in HTML CSS

CSS3436 views

Creating the Indian National Flag using HTML and CSS is an exciting exercise that can help you understand how to use CSS for positioning and styling elements with the help of transform and calc(). In this tutorial, we'll create the flag of India step by step using just HTML and CSS.

HTML Setup

        <div id="flag">
            <ul>
                <li style="--i:0"></li>
                <li style="--i:1"></li>
                <li style="--i:2"></li>
                <li style="--i:3"></li>
                <li style="--i:4"></li>
                <li style="--i:5"></li>
                <li style="--i:6"></li>
                <li style="--i:7"></li>
                <li style="--i:8"></li>
                <li style="--i:9"></li>
                <li style="--i:10"></li>
                <li style="--i:11"></li>
                <li style="--i:12"></li>
                <li style="--i:13"></li>
                <li style="--i:14"></li>
                <li style="--i:15"></li>
                <li style="--i:16"></li>
                <li style="--i:17"></li>
                <li style="--i:18"></li>
                <li style="--i:19"></li>
                <li style="--i:20"></li>
                <li style="--i:21"></li>
                <li style="--i:22"></li>
                <li style="--i:23"></li>
            </ul>
        </div>

CSS Styling for Ashoka Chakra

        div#flag ul {
            list-style: none;
            border-radius: 100%;
            border: #0e2165 solid 1px;
            width: 46px;
            height: 46px;
            position: relative;
        }

        div#flag ul li {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 50%;
            height: 1px;
            background-color: #0e2165;
            transform-origin: left;
            transform: translateY(-50%) rotate(calc(15deg * var(--i)));
        }

How to Draw Indian National Flag in HTML CSS

File Name: Indian-National-Flat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Indian Flag - Happy Independence Day</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #292929;
        }

        section {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
        }

        div#flag {
            width: 350px;
            height: 50px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        div#flag::before {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            top: -100%;
            height: 50px;
            background-color: #f47300;
        }

        div#flag::after {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            top: 100%;
            height: 50px;
            background-color: #158509;
        }

        div#flag ul {
            list-style: none;
            border-radius: 100%;
            border: #0e2165 solid 1px;
            width: 46px;
            height: 46px;
            position: relative;
        }

        div#flag ul li {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 50%;
            height: 1px;
            background-color: #0e2165;
            transform-origin: left;
            transform: translateY(-50%) rotate(calc(15deg * var(--i)));
        }
        
    </style>
</head>
<body>
    <section>
        <div id="flag">
            <ul>
                <li style="--i:0"></li>
                <li style="--i:1"></li>
                <li style="--i:2"></li>
                <li style="--i:3"></li>
                <li style="--i:4"></li>
                <li style="--i:5"></li>
                <li style="--i:6"></li>
                <li style="--i:7"></li>
                <li style="--i:8"></li>
                <li style="--i:9"></li>
                <li style="--i:10"></li>
                <li style="--i:11"></li>
                <li style="--i:12"></li>
                <li style="--i:13"></li>
                <li style="--i:14"></li>
                <li style="--i:15"></li>
                <li style="--i:16"></li>
                <li style="--i:17"></li>
                <li style="--i:18"></li>
                <li style="--i:19"></li>
                <li style="--i:20"></li>
                <li style="--i:21"></li>
                <li style="--i:22"></li>
                <li style="--i:23"></li>
            </ul>
        </div>
    </section>
</body>
</html>

Result Screenshot(s)

How to Draw Indian National Flag in HTML CSSWorking Sample0

Author:Geekboots