How to Draw Indian National Flag in HTML CSS

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)));
        }