Quatre façons simples de dessiner un rectangle en HTML

Cet article introduira quatre méthodes de base pour dessiner des formes sur les pages Web: en utilisant HTML et CSS, en utilisant uniquement CSS, en utilisant SVG et en utilisant des éléments de toile HTML.

Points clés

• Les quatre méthodes de base de dessin de formes sur les pages Web sont les suivantes: utiliser HTML et CSS, en utilisant uniquement CSS, en utilisant SVG et en utilisant des éléments de toile HTML.
• HTML et CSS peuvent être utilisés pour créer des formes simples telles que les rectangles et les cercles, tandis que l'utilisation de CSS peut créer des formes à travers des pseudo-éléments tels que ::before ou ::after. SVG permet de créer des formes plus complexes, tandis que les éléments de canevas HTML peuvent être utilisés pour créer des fonctionnalités graphiques et interactives.
• La méthode de sélection de la forme de dessin dans HTML dépend du résultat souhaité. Le HTML et le CSS sont idéaux pour créer des conteneurs de contenu et des éléments décoratifs; Caractéristiques, mais nécessite une compréhension plus profonde du JavaScript.

Dessinez des rectangles en utilisant HTML et CSS

La création de formes utilisant HTML et CSS est très simple. Nous pouvons utiliser l'élément div pour définir sa largeur et sa hauteur, ainsi que les bordures et / ou les couleurs d'arrière-plan:

<code class="language-css">div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}</code>

L'exemple de codePen suivant montre les résultats.

[Codepen Exemple de lien - Veuillez remplacer par la liaison codepen réelle]

Remarque: Dans l'exemple ci-dessus, l'élément div est centré à l'aide d'une grille CSS.

Bien sûr, nous pouvons également placer du contenu dans le rectangle. Veuillez l'essayer dans l'exemple Codepen ci-dessus.

Nous pouvons également dessiner d'autres formes à l'aide de l'attribut border-radius, comme les cercles:

<code class="language-css">div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}</code>

[Codepen Exemple de lien - Veuillez remplacer par la liaison codepen réelle]

Nous pouvons également dessiner des ellipses:

<code class="language-css">div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}</code>

[Codepen Exemple de lien - Veuillez remplacer par la liaison codepen réelle]

Nous pouvons même essayer des formes plus particulières, telles que:

<code class="language-css">div {
  width: 200px;
  height: 200px;
  border: 10px solid #ed21f3;
  background-color: #f7f7f7;
  border-radius: 50% 25%;
}</code>

[Codepen Exemple de lien - Veuillez remplacer par la liaison codepen réelle]

Lire plus approfondie:

• En savoir plus sur l'utilisation des attributs border-radius.

Dessinez des rectangles en utilisant CSS uniquement

Dans l'exemple ci-dessus, nous avons utilisé des éléments HTML pour créer des formes. Maintenant, utilisons simplement CSS.

Pour ce faire, nous utiliserons CSS ::before pseudo-élément. (Nous pouvons également utiliser ::after).

Ce qui suit est ce que nous pouvons faire:

<code class="language-css">body::before {
  content: '';
  width: 500px;
  height: 200px;
  border: 10px solid #21f348;
  background-color: #f7f7f7;
}</code>

[Codepen Exemple de lien - Veuillez remplacer par la liaison codepen réelle]

Nous créons un pseudo-élément attaché à l'élément , puis le stylisons comme ceux face à l'élément div ci-dessus. Nous pouvons également ajouter du contenu à cette forme en plaçant du texte, des images, etc. entre les citations de l'attribut content, telles que content: 'This is some content!'.

Lire plus approfondie:

• Vous pouvez en savoir plus sur ::before et ::after dans notre guide CSS Pseudo-Elements.

Dessinez des rectangles à l'aide de SVG

SVG nous permet de créer des formes très complexes dans HTML. Voici un exemple simple de la façon de créer un rectangle:

<code class="language-css">div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}</code>

[Codepen Exemple de lien - Veuillez remplacer par la liaison codepen réelle]

Lire plus approfondie:

• En savoir plus sur SVG.
• Vous pouvez en savoir plus sur l'utilisation de SVG sur MDN.

Créer des rectangles à l'aide d'éléments de toile HTML

Nous pouvons également créer des formes à l'aide d'éléments de toile HTML. Nous créons d'abord un élément de toile dans HTML et définissons la largeur et la hauteur:

<code class="language-css">div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}</code>

Ensuite, nous ajoutons le javascript suivant:

<code class="language-css">div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}</code>

L'exemple de codePen suivant montre les résultats.

[Codepen Exemple de lien - Veuillez remplacer par la liaison codepen réelle]

Lire plus approfondie:

• Lisez l'élément Canvas sur MDN.
• Lisez notre article sur Canvas vs SVG.

Résumé

Dans cet article, nous introduisons quatre façons simples de dessiner des formes en HTML. La méthode que nous devons utiliser dépend de ce que nous voulons réaliser.

Des formes de dessin en HTML et les style à l'aide de CSS est très courante et idéale lors de la création de conteneurs de contenu pour les pages HTML. Ces éléments stylisés peuvent également être utilisés à des fins décoratives. (Consultez Codepen pour des milliers de façons créatives de créer des œuvres d'art incroyables en utilisant HTML et CSS.)

La création de formes à l'aide de pseudo-éléments CSS est très pratique pour ajouter des modifications décoratives et des infractions aux pages Web.

SVG est un excellent outil pour créer des formes légères et réactives pour les pages Web. Les codes SVG peuvent être intégrés dans nos pages HTML, ou nous pouvons nous lier à des fichiers SVG comme les images liées et les intégrer dans la page de cette manière.

L'élément

<canvas></canvas> est une plate-forme puissante qui peut être utilisée pour créer une variété de graphiques et d'autres fonctionnalités interactives sur les pages Web, mais elle nécessite généralement une compréhension assez approfondie du JavaScript.

Enfin, si vous souhaitez passer la création de formes en HTML au niveau suivant, vous pouvez également consulter les merveilleux exemples suivants d'utilisation de CSS clip-path:

• Présentez les propriétés CSS clip-path et montrez comment animer les formes.
• Créez un portrait grinçant à l'aide de la fonction CSS path(), montrant comment utiliser clip-path avec SVG.

FAQS sur la façon de dessiner des rectangles dans HTML

(La partie FAQ mentionnée dans le texte d'origine doit être ajoutée ici, et le contenu doit être réécrit avec l'originalité pseudo-originale pour garder l'intention d'origine inchangée)

Veuillez noter que comme le lien Codepen n'est pas accessible, j'ai remplacé le lien par un espace réservé. Veuillez le remplacer par le lien Codepen réel vous-même.

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!