Comment dessiner une coche / cocher à l'aide de CSS

Un symbole de coche ou de tick peut être dessiné en HTML dans différentes formes et couleurs en utilisant différentes propriétés CSS. Pour dessiner quelque chose à travers un code, il est nécessaire de définir les valeurs des paramètres pour cette forme à travers certaines propriétés de style comme «hauteur","largeur","couleur","frontière", etc.

Cet article démontrera les approches suivantes:

• Méthode 1: Dessiner un symbole de coche / tick utilisant les propriétés CSS
• Méthode 2: Insertion d'une coche / tick à l'aide de caractères Unicode

Méthode 1: Dessiner un symbole de coche / tick utilisant les propriétés CSS

Pour dessiner un symbole de tick, la première exigence consiste à visualiser à quoi la marque de tick sera la fin car elle peut être créée dans n'importe quelle taille ou forme de couleur. Il sera préférable de comprendre cela à l'aide d'un exemple.

Exemple
Par exemple, le développeur veut dessiner une marque de tick simple de couleur verte à l'aide de propriétés de style CSS et l'afficher au centre de l'interface. Dans le code HTML, il est nécessaire de créer un ««Élément de conteneur avec un«identifiant"Ou un"classe»:

Dans la déclaration HTML ci-dessus, un «div"L'élément a été ajouté avec l'ID déclaré"coche".

Lors du style de l'élément à l'aide des propriétés CSS, ajoutez un «identifiant”Sélecteur pour faire référence à l'élément HTML, puis spécifiez les propriétés à l'intérieur:

#coche

transformée: rotation (45deg);
hauteur: 45px;
Largeur: 20px;
marge-gauche: 50%;
Border-Bottom: 9px Solid DarkoliveGreen;
Border-droite: 9px DarkoliveRen solide;

L'élément de style CSS ci-dessus a les propriétés suivantes:

• Le "Transformer: Rotation (45deg)”Faire tourner les lignes verticales et horizontales droites de manière à faire la forme d'un symbole de tick.
• Le "hauteur»La propriété définit la hauteur du symbole de tick à«45px".
• Le "largeur"La propriété fait le symbole"20px" large.
• Le "marge-gauche»La propriété aligne le symbole de tick au centre de l'interface de la page Web.
• Après cela, le «Bordure du bas" et "frontière«Les propriétés ont fixé le poids de la bordure des deux lignes à«9px»Et définissez le«darkolivegreen”Couleur pour les deux lignes qui font un symbole de tick complet.

Cela créera un symbole de coche ou de coche simple de couleur verte affichée au centre de l'interface de la page Web "45px"High et"20px" large:

Méthode 2: Insertion d'une coche / tick à l'aide de caractères Unicode

Il existe également des caractères Unicode qui insérent automatiquement les symboles de marque de tick dans la sortie sans avoir besoin de styliser et de définir les valeurs des paramètres pour eux. Par exemple, le caractère Unicode «U + 2713”Aide à ajouter un symbole de tick simple dans la sortie. De même, le caractère Unicode «U + 2713”Aide à insérer le symbole de tic lourd blanc dans la sortie. Pour apprendre à ajouter ces caractères Unicode dans un document HTML via un guide complet, cliquez ici.

Conclusion

Une coche ou un symbole de tick peut être dessiné en créant d'abord un élément HTML avec un ID ou une classe, puis en ajoutant l'ID ou le sélecteur de classe dans l'élément de style CSS pour se référer à cet élément. Pour créer la forme d'une coche / tick sur l'interface de la page Web, différentes propriétés CSS comme «hauteur","largeur","tourner" et "couleur"Peut être utilisé en fonction du type et de la taille de la coche que vous souhaite. Ce blog montre la méthode pour dessiner une coche / coche à l'aide de CSS.