Heim > Artikel > Web-Frontend > Erstellen Sie eine indische Flagge mit HTML und CSS

Erstellen Sie eine indische Flagge mit HTML und CSS

WBOYnach vorne: 2023-08-28 10:25:031055Durchsuche

Wir wissen, dass HTML und CSS Sprachen sind, die für das Web und Design verwendet werden, aber wir können viel mehr als nur Web-Apps erstellen. Beispielsweise können wir damit auch ein interessantes Projekt realisieren, das tiefe Kenntnisse beider Sprachen erfordert.

Unsere Aufgabe besteht also darin, die indische Flagge mit HTML und CSS zu erstellen. Unabhängig davon, welche Art von Flagge wir erstellen möchten, besteht sie aus zwei Teilen: Der erste ist der Fahnenmast und der zweite ist die Flagge selbst. Wie wir wissen, ist es für uns eigentlich ziemlich einfach, einem rechteckigen DIV Farbe zu verleihen und den dreifarbigen Teil der Flagge zu gestalten. Der knifflige Teil wird die Herstellung der Räder sein.

Der Ansatz besteht also darin, ein Containerelement zu verwenden, um das gesamte Logo aufzunehmen. Dies wird aus zwei Teilen bestehen: einer Stange und einer Flagge. Der Logo-Bereich enthält drei Elemente, die jeweils von oben nach unten ihre jeweilige Farbe darstellen. Das mittlere dieser drei Elemente fungiert als Behälterelement für das Rad.

Lass uns mit der Erstellung des Logos fortfahren.

Außenbehälter

Wie bereits besprochen, fasst der Außenbehälter die gesamte Flagge (Flaggen- und Stangenteil). Wir werden ein div-Tag verwenden und ihm eine „Container“-Klasse zuweisen. In diesem Div-Tag sind zwei Divs verschachtelt, eines für den Mast und eines für die Flagge.

Das Problem besteht nun darin, dass beide div-Elemente inline sein sollen, also verwenden wir das display:flex-Attribut, um dies zu erreichen. Danach legen wir die Breite, Höhe und Farbe des Elements fest.

Der HTML-Teil des Codes sieht wie folgt aus: -

<div class="container">
   <div class="polePart"></div>
   <div class="flagPart"></div>
</div>

CSS-Teil wird -

sein

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

Fügen Sie drei Farben hinzu

Jetzt beginnen wir mit dem Hinzufügen der drei Farben der Trikolore. Dazu verwenden wir drei verschachtelte Divs innerhalb des flagPart. Wir geben ihnen dann zunächst die entsprechende Breite und Höhe, die alle untereinander gleich sind, und weisen ihnen dann ihre jeweiligen Hintergrundfarben zu. Das erste Div hat eine safranfarbene Hintergrundfarbe, das mittlere Div hat eine weiße Hintergrundfarbe und das untere Div hat eine grüne Hintergrundfarbe.

HTML-Teil−

<body>
   <div class="topColor"></div>
   <div class="middleColor"></div>
   <div class="bottomColor"></div>
</body>

CSS-Teil−

.topColor {
   height: 100px;
   background-color: #ff9933
}
.middleColor {
   height: 100px;
   background-color: white
}
.bottomColor {
   height: 100px;
   background-color: green
}

Bitte beachten Sie, dass wir die Breite der inneren Divs nicht angeben müssen, da wir möchten, dass sie sich auf die Größe des übergeordneten Divs erstrecken, d. h. des Divs mit der MiddleColor-Klasse.

Räder hinzufügen

Jetzt werden wir das Rad im Mittelteil hinzufügen. Wir wissen, dass das Rad 24 Speichen hat. Deshalb werden wir 12 Linien verwenden und sie mithilfe von CSS so anwinkeln, dass sie einen Kreis bilden.

Bitte beachten Sie, dass dadurch nur Speichen gebildet werden. Für den kreisförmigen Teil des Rads verwenden wir die Eigenschaft „Grenzradius“ des Radbehälters.

HTML-Teil −

<!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-Teil −

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

Wir haben die Pseudoklasse des n-ten Kindes verwendet, um jede Reihe um 15 Grad zu drehen, da 12 um 15 Grad von der Mitte gedrehte Reihen 24 Speichen bilden. Die n-te untergeordnete Pseudoklasse wird verwendet, um die Anzahl der untergeordneten Elemente eines in geschweiften Klammern angegebenen Containers abzugleichen.

Alles, was wir erstellt haben, ist eine einfache Flagge, aber mit fortgeschrittenen CSS-Kenntnissen können wir noch viel mehr tun. Mithilfe von Animationen können wir die Flagge so aussehen lassen, als würde sie im Wind flattern oder sich auf Rädern bewegen, aber darauf gehen wir in diesem Artikel nicht näher ein.

Beispiel

Hier ist ein vollständiges Arbeitsbeispiel des oben genannten -

<!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>

Fazit

In diesem Artikel haben wir gesehen, wie man mit HTML und CSS die indische Flagge, die Trikolore, erstellt. Wir haben gesehen, dass wir Eigenschaften in CSS wie Hintergrundfarbe, Rahmen, Rahmenradius, Transformation usw. verwenden können, um eine schöne Flagge zu erstellen.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine indische Flagge mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html display border 伪类 background transform flex

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich eine Sticky-Ball-Animation mit HTML und CSS?Nächster Artikel：Wie erstelle ich eine Sticky-Ball-Animation mit HTML und CSS?

In Verbindung stehende Artikel

Mehr sehen