Comment dessiner un rectangle dans HTML ou CSS

Un rectangle peut être créé en utilisant HTML ainsi qu'une combinaison de HTML et CSS. Lors de l'utilisation des propriétés CSS pour dessiner un rectangle, il est simplement nécessaire d'ajouter le sélecteur pertinent de l'élément HTML et d'appliquer certaines propriétés de style dans l'élément de style CSS. Mais, si le développeur veut dessiner un rectangle sans ajouter un élément de style CSS séparé, le style en ligne peut être utilisé à l'intérieur des balises d'ouverture HTML.

Cet article expliquera comment dessiner un rectangle à travers les méthodes suivantes:

• Méthode 1: Dessiner un rectangle à l'aide de CSS
• Méthode 2: Dessiner un rectangle à l'aide de HTML

Méthode 1: Dessiner un rectangle à l'aide de CSS

Pour dessiner un rectangle à l'aide de l'élément de style CSS, un élément HTML simple doit être ajouté en lui attribuant une classe ou un ID. Ensuite, les propriétés peuvent ensuite être appliquées à l'élément via l'ID ou les sélecteurs de classe. Il façonne l'élément sous la forme d'un rectangle.

Exemple
Comprenons le concept ci-dessus à l'aide d'un exemple:

Dans la déclaration HTML ci-dessus, un ««L'élément de conteneur a été ajouté avec une classe déclarée«rectangle".

Après avoir créé un «»Élément, les propriétés CSS peuvent y être appliquées pour représenter le conteneur DIV comme un rectangle dans l'interface de sortie:

.rectangle

Largeur: 300px;
hauteur: 150px;
Contexte: rose;
marge-gauche: 25%;

Dans l'extrait de code ci-dessus:

• Le sélecteur de classe «.rectangle"A été ajouté pour se référer à l'élément de conteneur Div respectif.
• À l'intérieur du sélecteur de classe, le «largeur«Une propriété a été ajoutée et définie comme«300px". Cela définira la largeur du rectangle à 300 pixels.
• De même, le «hauteur»La propriété définit la hauteur du rectangle à«150px".
• "arrière-plan«La propriété a été définie comme«rose". Cela colorera le rectangle rose.
• Le "marge-gauche"La propriété vient d'être ajoutée pour déplacer légèrement le rectangle vers la droite pour une meilleure représentation visuelle du rectangle.

Cela créera un rectangle sur la page Web:

Méthode 2: Dessiner un rectangle à l'aide de HTML

Une autre approche consiste à ajouter toutes les propriétés nécessaires pour dessiner un rectangle dans les balises d'ouverture HTML.

Exemple
Comprenons cela avec un exemple simple en ajoutant la balise HTML «» à l'intérieur de la balise «» (les deux à l'intérieur de la balise div principale):

Dans l'extrait de code ci-dessus:

• UN ""L'élément de conteneur a été ajouté pour créer un div avec l'ID"redonner".
• À l'intérieur de l'étiquette Div d'ouverture, le CSS en ligne "marge»La propriété définit la position de placement vertical du rectangle ou du div comme«100px»Et la position de placement horizontale comme«150px".
• À l'intérieur de "«Élément, il y a le«”(Élément graphique vectoriel évolutif) pour ajouter des graphiques au«" élément.
• Ensuite, un «"L'élément a été ajouté avec la classe déclarée"rectangle".
• Le style CSS en ligne dans le «»Tag définit la couleur du rectangle comme«violet" à travers le "Remplir: violet" propriété.
• Le "largeur" et le "hauteur«Les propriétés en ligne définissent respectivement la longueur horizontale et verticale du rectangle.

Ce qui suit sera le résultat généré via l'extrait de code ci-dessus:

Nous avons démontré deux méthodes pour dessiner un rectangle.

Conclusion

Un rectangle peut être dessiné facilement lors de l'application d'un style en ligne. Dans ce cas, il est simplement nécessaire d'ajouter le «marge","hauteur" et "largeur»Propriétés dans les étiquettes d'ouverture des éléments. Tout en ajoutant un élément de style CSS séparé, ajoutez le "hauteur","largeur" et "couleur»Propriétés dans l'élément de style CSS. Ce blog a discuté des approches pour dessiner un rectangle dans HTML ou CSS.