Hexagone CSS
Un hexagone est une forme géométrique mathématique appelée polygone ayant 6 bords. Pour concevoir un hexagone, nous utiliserons HTML et CSS."
CSS
CSS est principalement de trois types. Chaque type dépend de l'emplacement de sa déclaration. L'un est en ligne, qui est écrit à l'intérieur des balises HTML. Le second est interne, écrit dans la partie tête des balises HTML. Tandis que le troisième est le CSS externe, qui est déclaré en dehors du code HTML et du fichier HTML dans un autre fichier avec l'extension CSS. Nous irons avec le CSS interne dans la conception de l'hexagone. Les balises d'ouverture et de clôture pour le CSS interne sont:
Outils
Les outils de base utilisés pour créer une page Web statique simple sont un éditeur de texte et tout navigateur. Vous pouvez utiliser n'importe quel éditeur de texte, mais dans cet article, nous utilisons un éditeur de texte par défaut de Windows simple et Chrome comme navigateur. Nous écrivons le code ou les balises HTML dans l'éditeur et exécutons ce fichier sur le navigateur.
Prérequis
Il n'y a pas de conditions préalables concernant un outil ou un logiciel. Mais l'utilisateur doit avoir un savoir-faire des balises HTML, car les bases sont nécessaires pour construire un hexagone et la concevoir. Les balises HTML contiennent deux parties principales, la tête et le corps.
Tandis que d'autres balises seront expliquées avec le code au moment de la mise en œuvre.
Mise en œuvre de l'hexagone
Pour l'implémentation, ouvrez le bloc-notes et démarrez le code HTML. À l'intérieur de la partie tête, nous avons utilisé le nom du titre comme hexagone; Cela apparaîtra dans l'onglet. Se diriger vers le CSS interne. À l'intérieur de la balise de style, nous avons créé une explication de la classe hexagone.
Dans CSS, principalement dans le style interne et externe, pour rendre le code court et facilement compréhensible, nous utilisons des identifiants et des classes. Ici, la question se pose de savoir comment fonctionnent ces classes et ces identifiants. Toutes les fonctionnalités et effets que nous souhaitons appliquer à tout objet que nous créons sont mentionnés à l'intérieur de la classe ou du corps de l'ID. Ces identifiants et classes sont accessibles en utilisant leurs noms à l'intérieur des balises où nous voulons appliquer un effet. Alors ici, nous avons créé un ID hexagone à l'intérieur de la balise de style. Cette pièce d'identité sera appliquée au moment de la création de l'hexagone. À l'intérieur du corps hexagone, nous avons déclaré un emplacement pour dessiner la forme; Pour cela, nous avons utilisé deux fonctionnalités, l'une est le haut, et l'autre est la gauche. Le «haut» décide de la distance du haut à la forme. Et la gauche décide la distance de la bordure gauche à la forme. Il peut être écrit en pourcentage ou toute autre unité.
En haut: 20;
Gauche: 10%;
La bordure marginale est définie comme auto. De cette façon, l'emplacement de la forme est tout défini. Maintenant, nous allons appliquer une couleur à la forme. Ceci est donné pour être la couleur d'arrière-plan. Nous avons choisi le magenta.
Color en arrière-plan: magenta;
L'hexagone polygone est formé en ayant des coins ou des points incurvés. Pour que les points incurvés, nous ajouterons une caractéristique du rayon de bord.
Border-Radius: 10px;
Ici, la valeur est écrite dans l'unité Pixels. Nous allons maintenant décider de donner la forme, la hauteur et la largeur. Ces deux fonctionnalités sont l'élément constitutif de la création et du style d'une forme. Toute forme ou tout texte est toujours recommandé d'être écrit ou dessiné dans une boîte spécifiée. Cette boîte aide à traiter très facilement l'objet. Nous avons donc déclaré une boîte de frontière ici.
CSS | Pseudo éléments / propriété de classe
Cette propriété est utilisée pour faire pivoter les lignes de forme à 60 degrés, ce qui fait un hexagone parfait. Un pseudo-élément CSS est un type de style qui est utilisé pour styliser une partie particulière de l'élément. Par exemple, il stylique la première ligne de la forme. Tous ces contenus sont appliqués avant et après le contenu de la forme. Nous pouvons appliquer n'importe quelle fonctionnalité de cette manière.
Le contenu et la frontière sont quelques fonctionnalités intégrées de la propriété Pseudo. Toutes les autres caractéristiques de la hauteur, de la largeur et de la couleur sont les mêmes que ce que nous avons décrite dans la description simple de l'ID de l'hexagone.
Maintenant, toutes les fonctionnalités ci-dessus sont déclarées comme deux portions à appliquer pour former un hexagone.
.Hexagon: avant
Transformer: Rotation (60deg);
Une caractéristique similaire concerne la partie restante de l'hexagone; Toutes les formes sont créées en utilisant un angle spécifié pour le polygone 60 degrés se forment entre deux lignes alternatives.
Le style et les étiquettes de tête sont maintenant fermés. Assurez-vous que toutes les balises que vous avez ouvertes doivent être fermées pour les appliquer dans le code; Sinon, certains effets peuvent être perdus. Menant maintenant vers la partie du corps.
Ici, nous avons utilisé une simple rupture de texte pour écrire une ligne. Ce style est un exemple de style en ligne.
< body style = "text-align : left"<
Nous avons donné un alignement sur le texte à afficher sur le côté gauche de la page Web et à la couleur de la police en noir.
Après le texte, nous déclarerons le code de la forme hexagone. Div est un conteneur comme une table en html. Qui est utilisé pour contenir des objets en position droite. À l'intérieur du corps DIV, la classe CSS et le nom d'identification sont déclarés appliquer toutes les fonctionnalités du conteneur div de la forme. Fermez toutes les balises ouvertes, je.e., Div, corps et html.
Nous enregistrons le fichier du bloc-notes avec le «.Extension html ”pour créer une page Web. Ce fichier est enregistré comme «Exemple.html."Ainsi, en utilisant cette extension, l'icône du fichier sera définie comme l'icône du navigateur par défaut.
Lorsque nous exécutons le fichier dans le navigateur, il affichera une page Web ayant un titre et une forme hexagonale sur le côté gauche de la page.
Conclusion
Un diagramme hexagone est formé en utilisant du HTML intégré avec une feuille de style en cascade avec. Au début, nous parlons des bases de HTML. Et les types de CSS sont également expliqués pour éliminer toute sorte d'ambiguïté concernant les types CSS. Deux outils de base sont mentionnés qui sont essentiels pour la création et l'exécution des balises HTML et CSS. L'exemple hexagone est implémenté et expliqué ligne par ligne avec le code et son utilisation. Une façon unique de créer une forme est expliquée à travers la propriété Pseudo-Element CSS. En fin de compte, nous avons montré la page Web statique qui est formée à la suite du code défini.