«Vous devez vous rappeler que lorsque nous étions au collège, nous avions l'habitude de prendre des séances de dessin pour apprendre le dessin. Nous avons essayé presque tous les types de création de forme et de dessin dans des livres de dessin, je.e., cercle, rectangle, carré, triangle, polygone et bien d'autres. L'une de ces formes est le «polygone». Un polygone serait une forme avec de nombreux côtés. Dans HTML, nous pouvons également créer une forme de polygone d'images ou de conteneurs ou simplement essayer une création de polygone à base de vecteur. Dans ce tutoriel, nous consommerons quelques exemples pour créer des polygones de tous ces types."

Exemple 01

Regardons notre premier exemple HTML pour créer un polygone sur la page Web HTML. Pour cela, nous devons générer un HTML standard ".Document HTML »dans le code Visual Studio. Nous avons commencé l'exemple HTML avec le format HTML standard des balises utilisées pour créer une page, I.e., HTML, tête, style, corps, etc. La balise de l'élément de tête de ce code contient une simple balise «titre» contenant un titre pour cette page. La balise Head contient également du style pour cette page Web, mais nous sauterons son explication pendant un certain temps. Dans l'étiquette corporelle de ce code HTML, nous avons utilisé une balise de titre pour la tête de taille 1 standard de HTML, I.e., H1.

Une balise «div» est utilisée pour créer un conteneur dans la page Web HTML. Ce conteneur contiendrait une image utilisant la balise «IMG» suivie de l'attribut «SRC» pour attacher le chemin d'accès d'une image avec l'attribut «Alt» défini sur «Bitcoin». Après ce conteneur, notre page HTML contiendrait un long paragraphe de texte via l'utilisation du

Tag pour les paragraphes HTML. Notre script de page HTML est terminé ici. Donc, nous fermons l'étiquette corporelle comme .

Maintenant, nous allons jeter un œil à la balise de style pour ajouter un style au conteneur «div» de notre script HTML pour créer une forme de polygone. Tout d'abord, nous avons utilisé la propriété flottante de CSS pour tirer le conteneur sur le côté gauche de la page HTML avec une largeur de 250px et une hauteur de 160px. Nous avons réglé la forme de l'extérieur d'un conteneur au polygone.

Après cela, l'image a également été convertie en forme de polygone via l'utilisation de la propriété standard de clips Webkit. Cette propriété utilise la fonction polygon () pour créer un polygone des mêmes valeurs de pourcentage que nous avons utilisées pour le conteneur. Les étiquettes de style et de tête ont été terminées, et nous allons exécuter ce code.

Après avoir exécuté ce code HTML dans le navigateur Chrome ou Internet Explorer, nous avons obtenu la sortie à faire affiché. La forme de polygone standard a été donnée au conteneur, et l'image a été ajoutée à ce conteneur en la convertissant en une forme de polygone. Dans le même temps, le paragraphe de texte a été affiché avec la position relative du conteneur de polygone sur notre écran.

Exemple 02

Le premier exemple a été consacré à l'utilisation d'une simple fonction de polygone avec la propriété Clip-Path pour couper l'image et la convertir en forme de polygone. Dans cet exemple, nous créerons un polygone d'au moins 4 bords à l'aide d'une propriété ou d'une balise de polygone simple. Donc, nous avons commencé l'exemple avec l'identifiant HTML suivi par la balise de tête. Cette balise Head utilise la balise de titre pour donner un titre à notre page HTML. Nous n'avons utilisé aucune balise de style car nous effectuerons le style en ligne dans cet exemple de code. Ainsi, le «corps» de cette page HTML a été lancé avec la balise «Body», je.e., . Il suit l'étiquette de tête

pour cette page.

Après cela, nous utilisons la balise standard «SVG» pour utiliser des graphiques vectoriels standard pour la création d'une forme de polygone. La hauteur et la largeur ont été définies sur 400px pour la zone «SVG» sur la page HTML. Nous avons commencé la balise avec les «points» de décalage à utiliser pour la création d'un polygone. Ces points vous indiqueraient la valeur x et y pour le bord spécifique. Vous pouvez utiliser le plus de bords possible que possible. Nous n'utilisons que 5 selon le nombre total de virgules. Le style en ligne a été utilisé avec le mot-clé «style», et nous avons utilisé la propriété «remplir» pour remplir le polygone d'une couleur vert clair sélectionné dans le jeu de couleurs standard RVB. Parallèlement à cela, la propriété de course a été utilisée pour créer un contour de bordure pour le polygone d'une couleur violette, et la propriété de largeur de course a réglé l'épaisseur de la bordure du polygone à 7px. Le «SVG» et le corps de cette page ont été achevés, et nous pouvons exécuter ce code dans le code Visual Studio.

La sortie du code HTML polygone a affiché une rubrique simple avec un polygone de 4 côtés. Bien qu'il ait 5 côtés, le 5ème est caché en raison de l'utilisation d'une petite valeur pour un côté. Vous pouvez voir que la forme du polygone a été remplie d'une couleur vert clair et d'une bordure violette.

Exemple 03

Jetons un coup d'œil à un autre exemple pour créer une forme de polygone sur notre page HTML. Pour cela, nous consommerons une balise SVG similaire dans notre code HTML. Ainsi, à partir du fichier de code Visual Studio, nous avons ajouté une balise HTML suivie de la balise standard. Cette fois, nous n'utilisons pas la balise de tête, de titre ou de style car nous pouvons effectuer toute la décoration vectorielle en utilisant la balise SVG simple dans le corps d'un code HTML.

Dans l'étiquette corporelle de ce code, nous avons commencé la balise et spécifié la largeur et la hauteur de la zone SVG sur la page HTML. Après cela, nous avons utilisé la balise polygone pour créer un nouveau polygone et ajouté ses points et son style. Nous avons ajouté un total de 5 arêtes ou points pour ce polygone avec les différentes valeurs de l'axe X et Y. Ces bords sont placés aux positions définies selon la page HTML. Le polygone sera rempli de couleur violette, et son fond sera de couleur rose cramoisie. Parallèlement à cela, la propriété de largeur de course a été fixée à 5, et la règle de remplissage a été définie sur Odd. Cela signifie que lorsque les bords d'un polygone se croisent, la couleur y serait remplie seulement.

Après avoir exécuté ce code HTML dans le navigateur chrom.e., Star Polygon, sur l'écran de la page Web. Ce polygone d'étoile a obtenu 5 bords avec une frontière cramoisie, rose et des cônes remplis. Vous pouvez voir que la zone intérieure d'une étoile a été laissée non remplie. C'est parce que nous avons utilisé la propriété de remplissage de la règle pour pair-odd.

Conclusion

Dans le premier paragraphe, nous avons discuté de l'utilisation et de l'évolution des formes dans notre vie ainsi que leur utilisation dans les scripts HTML. Parallèlement à cela, nous avons élaboré trois exemples très différents de scripts HTML pour créer différents types de polygones, je.e., chacun contient un nombre différent de côtés et de bords. Pour cela, nous avons essayé d'utiliser la fonction Polygon, la balise polygone et la balise SVG pour créer des formes à base de vecteur, des propriétés de chemin à clip.