Maison > Article > interface Web > Créer un drapeau indien en utilisant HTML et CSS

Créer un drapeau indien en utilisant HTML et CSS

WBOYavant: 2023-08-28 10:25:031003parcourir

Nous savons que HTML et CSS sont des langages utilisés pour le Web et le design, mais nous pouvons faire bien plus que simplement créer des applications Web. Par exemple, nous pouvons également les utiliser pour réaliser un projet intéressant, qui nécessitera une connaissance approfondie des deux langues.

Notre tâche consiste donc à créer le drapeau indien en utilisant HTML et CSS. Quel que soit le type de drapeau que nous souhaitons créer, il comportera deux parties : la première est le mât et la seconde est le drapeau lui-même. Comme nous le savons, il est en fait assez simple pour nous d'ajouter de la couleur à un DIV rectangulaire et de créer la partie tricolore du drapeau, la partie délicate sera de fabriquer les roues.

L'approche consiste donc à utiliser un élément conteneur pour contenir l'intégralité du logo. Celui-ci sera composé de deux parties : un mât et un drapeau. La section logo contiendra trois éléments, chacun représentant leur couleur respective de haut en bas. L'élément intermédiaire parmi ces trois éléments fera office d'élément conteneur pour la roue.

Passons à la création du logo.

Conteneur externe

Comme nous en avons discuté, le conteneur extérieur contiendra l’intégralité du drapeau (partie drapeau et mât). Nous allons utiliser une balise div et lui donner une classe "conteneur". Il y aura deux divs imbriqués dans cette balise div, un pour le mât et un pour le drapeau.

Le problème maintenant est que nous voulons que les deux éléments div soient en ligne, nous allons donc utiliser l'attribut display:flex pour y parvenir. Après cela, nous spécifierons la largeur, la hauteur et la couleur de l'élément.

La partie html du code ressemble à -

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

La partie CSS sera -

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

Ajoutez trois couleurs

Maintenant, nous allons commencer à ajouter les trois couleurs du drapeau tricolore. Pour ce faire, nous utiliserons trois divs imbriqués à l’intérieur du flagPart. Nous leur attribuerons ensuite d'abord la largeur et la hauteur appropriées, toutes égales les unes aux autres, puis leur attribuerons leurs couleurs de fond respectives. Le premier div a une couleur de fond safran, le div du milieu a une couleur de fond blanc et le div du bas a une couleur de fond vert.

Partie HTML−

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

Partie CSS−

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

Veuillez noter que nous n'avons pas besoin de spécifier la largeur des divs internes car nous voulons qu'ils s'étendent jusqu'à la taille du div parent, c'est-à-dire le div avec la classe middleColor.

Ajouter des roues

Maintenant, nous allons ajouter la roue dans la section centrale, nous savons qu'il y a 24 rayons dans la roue, c'est pourquoi nous allons utiliser 12 lignes et les incliner en utilisant CSS pour qu'elles forment un cercle.

Veuillez noter que cela ne formera que des rayons, pour la partie circulaire de la roue nous utiliserons la propriété "border-radius" du conteneur de roue.

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

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

Nous avons utilisé la pseudo-classe du nième enfant pour faire pivoter chaque rangée de 15 degrés, car 12 rangées pivotées de 15 degrés par rapport au centre formeront 24 rayons. La nième pseudo-classe enfant est utilisée pour correspondre au nombre d'éléments enfants d'un conteneur spécifié entre accolades.

Tout ce que nous avons créé est un simple drapeau, mais avec une connaissance avancée du CSS, nous pouvons faire bien plus. En utilisant l'animation, nous pouvons donner l'impression que le drapeau bat au vent ou se déplace sur des roues, mais nous n'entrerons pas dans les détails de cet article.

Exemple

Voici un exemple fonctionnel complet de ce qui précède -

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

Conclusion

Dans cet article, nous avons vu comment créer le drapeau indien, le drapeau tricolore, en utilisant HTML et CSS. Nous avons vu que nous pouvons utiliser des propriétés en CSS telles que background-color, border, border-radius, transform, etc. pour créer un magnifique drapeau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html display border 伪类 background transform flex

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer une animation de boule collante en utilisant HTML et CSS ?Article suivant：Comment créer une animation de boule collante en utilisant HTML et CSS ?

Articles Liés

Voir plus