我們知道HTML和CSS是用於網頁和設計的語言，但我們可以做的遠不止於製作網頁應用程式。例如，我們還可以使用它們製作一個有趣的項目，這將需要對這兩種語言的深入了解。
所以，我們手邊的任務是使用HTML和CSS來創建印度國旗。無論我們想要創建什麼類型的國旗，都會有兩個部分：第一個是旗桿，第二個是旗幟本身。正如我們所知，對於我們來說，向矩形DIV添加顏色並製作國旗的三色部分實際上相當簡單，棘手的部分將是製作輪子。
因此，方法是使用一個容器元素來保存整個標誌。這將分為兩部分：一根桿子和旗幟。標誌部分將包含三個元素，每個元素從上到下代表各自的顏色。這三個元素中的中間元素將充當輪子的容器元素。
讓我們繼續創建標誌。
正如我們所討論的，外部容器將容納整個旗幟（旗幟和桿部分）。我們將使用 div 標籤並給它一個「容器」類別。此 div 標籤中將嵌套兩個 div，一個用於桿子，一個用於旗幟。
現在的問題是我們希望這兩個div元素都是內聯的，所以我們將使用display:flex屬性來實現。之後，我們將指定元素的寬度、高度和顏色。
程式碼的 html 部分看起來像 -
<div class="container"> <div class="polePart"></div> <div class="flagPart"></div> </div>
CSS 部分將會是 -
.container {
display: flex;
}
.polePart {
height: 800px;
width: 11.111px;
background: brown;
border-top-left-radius: 12px;
}
.flagPart {
width: 450px;
height: 300px;
box-shadow: 0px 0px 90px 1px rgb(129, 115, 129);
background-color: transparent;
position: relative;
}
現在我們將開始加入三色的三種顏色。為此，我們將在 flagPart 中使用三個巢狀的 div。然後，我們將首先給它們適當的寬度和高度，所有這些都彼此相等，然後為它們分配各自的背景顏色。第一款 div 的背景色為藏紅色花色，中間的 div 的背景色為白色，底部的 div 的背景色為綠色。
HTML 部分−
#<body> <div class="topColor"></div> <div class="middleColor"></div> <div class="bottomColor"></div> </body>
CSS 部分−
#.topColor {
height: 100px;
background-color: #ff9933
}
.middleColor {
height: 100px;
background-color: white
}
.bottomColor {
height: 100px;
background-color: green
}
請注意，我們不需要指定內部div的寬度，因為我們希望它們延伸到父div的大小，即具有middleColor類別的div。
現在我們將在中間部分添加輪子，我們知道輪子中有 24 個輻條，這就是為什麼我們將使用 12 條線並使用 CSS 將它們旋轉角度，使它們形成一個圓圈。
請注意，這只會形成輻條，對於輪子的圓形部分，我們將使用輪子容器的「border-radius」屬性。
HTML 部分 −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="wheelPart">
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
</div>
</body>
</html>
CSS 部分 −
#.wheelPart {
height: 99px;
width: 99px;
border: 1px solid darkblue;
border
-radius: 100px;
position: relative;
margin: 0 auto
}
.wheelPart .spokeLine {
height: 100%;
width: 1px;
display: inline
-block;
position: absolute;
left: 50%;
background: darkblue;
}
.spokeLine:nth
-child(1) {
transform: rotate(15deg)
}
.spokeLine:nth
-child(2) {
transform: rotate(30deg)
}
.spokeLine:nth
-child(3) {
transform: rotate(45deg)
}
.spokeLine:nth
-child(4) {
transform: rotate(60deg)
}
.spokeLine:nth
-child(5) {
transform: rotate(75deg)
}
.spokeLine:nth
-child(6) {
transform: rotate(90deg)
}
.spokeLine:nth-child(7) {
transform: rotate(105deg)
}
.spokeLine:nth-child(8) {
transform: rotate(120deg)
}
.spokeLine:nth-child(9) {
transform: rotate(135deg)
}
.spokeLine:nth-child(10) {
transform: rotate(150deg)
}
.spokeLine:nth-child(11) {
transform: rotate(165deg)
}
.spokeLine:nth-child(12) {
transform: rotate(180deg)
}
我們使用了nth-child偽類來將每一行旋轉15度，因為從中心旋轉15度的12行將形成24個輻條。 nth child偽類別用於匹配在大括號中指定的容器的子元素的編號。
我們所創建的只是一個簡單的旗幟，但利用CSS的高級知識，我們可以做得更多。使用動畫，我們可以讓旗幟看起來像在風中飄動或移動輪子，但是在本文中我們不會深入討論這些。
以下是上述的完整工作範例 -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.container {
display: flex;
}
.polePart {
height: 800px;
width: 11.111px;
background: brown;
border-top-left-radius: 12px;
}
.flagPart {
width: 450px;
height: 300px;
box-shadow: 0px 0px 90px 1px rgb(129, 115, 129);
background-color: transparent;
position: relative;
}
.topColor {
height: 100px;
background-color: #ff9933
}
.middleColor {
height: 100px;
background-color: white
}
.bottomColor {
height: 100px;
background-color: green
}
.wheelPart {
height: 99px;
width: 99px;
border: 1px solid darkblue;
border-radius: 100px;
position: relative;
margin: 0 auto;
}
.wheelPart .spokeLine {
height: 100%;
width: 1px;
display: inline-block;
position: absolute;
left: 50%;
background: darkblue;
}
.spokeLine:nth
-child(1) {
transform: rotate(15deg)
}
.spokeLine:nth
-child(2) {
transform: rotate(30deg)
}
.spokeLine:nth
-child(3) {
transform: rotate(45deg)
}
.spokeLine:nth
-child(4) {
transform: rotate(60deg)
}
.spokeLine:nth
-child(5) {
transform: rotate(75deg)
}
.spokeLine:nth
-child(6) {
transform: rotate(90deg)
}
.spokeLine:nth
-child(7) {
transform: rotate(105deg)
}
.spokeLine:nth
-child(8) {
transform: rotate(120deg)
}
.spokeLine:nth
-child(9) {
transform: rotate(135deg)
}
.spokeLine:nth-child(10) {
transform: rotate(150deg)
}
.spokeLine:nth-child(11) {
transform: rotate(165deg)
}
.spokeLine:nth-child(12) {
transform: rotate(180deg)
}
</style>
</head>
<body>
<div class="container">
<div class="polePart"></div>
<div class="flagPart">
<div class="topColor"></div>
<div class="middleColor">
<div class="wheelPart">
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
<span class="spokeLine"></span>
</div>
</div>
<div class="bottomColor"></div>
</div>
</div>
</body>
</html>
在本文中，我們看到如何利用HTML和CSS來創建印度國旗，三色旗。我們看到可以使用CSS中的屬性，例如background-color、border、border-radius、transform等來創造一個美觀的國旗。
以上是使用HTML和CSS建立印度國旗的詳細內容。更多資訊請關注PHP中文網其他相關文章！
