THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create Ashoka Chakra using HTML and CSS with Source Code [Hindi]

Bharat mat Ki Jai

Here is The Source Code for you guys on How to Create Ashoka Chakra using HTML and CSS with Source Code [Hindi], feel Free to use.


Here we will see How to Create Ashoka Chakra using HTML and CSS with Source Code [Hindi]

The Ashoka Chakra is the depiction of the “Dharmachakra”; represented with 24 spokes. The Ashok Chakra is visible in the Indian National flag, where it is rendered in a navy blue color on a white background.
Our main is to create the 24 spokes. So for this, we will use CSS property called transform and Positions.
Now here comes, the logic what we want is 24 spokes in one circle and with actual diffences between each spokes. Now for this we will use transform:rotate() property and we will take 15deg differences between each spokes.

<!DOCTYPE html>
<html>
<head>
<title></title>

<style >

*{
margin: 0;
padding: 0;
}

.chakra{
width: 96px;
height: 96px;
border:2px solid blue;
border-radius: 50%;
margin: auto;
}

.chakra li{
list-style: none;
width: 94px;
border: 1px solid blue;
position: relative;
}

li:nth-child(1){
top: 47px;
}

li:nth-child(2){
top: 45px;
transform: rotate(90deg);
}

li:nth-child(3){
top: 43px;
transform: rotate(15deg);
}

li:nth-child(4){
top: 41px;
transform: rotate(30deg);
}

li:nth-child(5){
top: 39px;
transform: rotate(45deg);
}

li:nth-child(6){
top: 37px;
transform: rotate(60deg);
}

li:nth-child(7){
top: 35px;
transform: rotate(75deg);
}

li:nth-child(8){
top: 33px;
transform: rotate(105deg);
}
li:nth-child(9){
top: 31px;
transform: rotate(120deg);
}

li:nth-child(10){
top: 29px;
transform: rotate(135deg);
}
li:nth-child(11){
top: 27px;
transform: rotate(150deg);
}

li:nth-child(12){
top: 25px;
transform: rotate(165deg);
}


</style>

</head>
<body>

<h2 style="text-align: center;"> <span style="color: orange">Ashoka</span>  <span style="color: green">Chakra</span> </h2>

<div class="chakra">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>

</body>
</html>


"I need your Help"
"Honestly, I have no idea how much to ask you for, but if you Donate minimum 30rs using PAYTM to support me, It's really gonna help me a lot."

Payment options is PAYTM NUMBER: 9518369954

3 comments: