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

” élément conteneur avec un “ identifiant » ou un « classe ” :

< div identifiant = 'coche' >< / div >

Dans l'instruction HTML ci-dessus, un ' div ' L'élément a été ajouté avec l'identifiant déclaré comme ' coche ”.

Tout en stylisant 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écifier les propriétés à l'intérieur :

---

---

#coche
{
transformer : faire pivoter ( 45 degrés ) ;
hauteur : 45 pixels ;
largeur : 20 pixels ;
marge-gauche : cinquante  % ;
bordure inférieure : 9 pixels vert olive foncé solide ;
bordure droite : 9 pixels vert olive foncé solide ;
}

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

• Le ' transformer : faire pivoter (45 degrés) ” fait pivoter les lignes droites verticales et horizontales de manière à créer la forme d'un symbole de coche.
• Le ' hauteur La propriété ' définit la hauteur du symbole de la coche sur ' 45px ”.
• Le ' largeur « la propriété rend le symbole » 20px ' large.
• Le ' marge-gauche ” aligne la coche au centre de l'interface de la page Web.
• Après cela, le « Bordure du bas ' et ' bordure droite ' Les propriétés définissent le poids de la bordure des deux lignes sur ' 9px » et définir le « vert olive foncé ” couleur pour les deux lignes qui forment un symbole de coche complet.

Cela créera une simple coche ou un symbole de coche de couleur verte affiché au centre de l'interface de la page Web ' 45px « haut et » 20px ' large:

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

Il existe également des caractères Unicode qui insèrent automatiquement les symboles de graduation dans la sortie sans avoir besoin de les styliser et de définir des valeurs de paramètre pour eux. Par exemple, le caractère Unicode ' U+2713 ” aide à ajouter un simple symbole de coche dans la sortie. De même, le caractère Unicode ' U+2713 ” permet d'insérer le symbole de coche blanche épaisse dans la sortie. Pour savoir comment ajouter ces caractères Unicode dans un document HTML grâce à un guide complet, cliquez sur ici .

Conclusion

Une coche ou un symbole de coche peut être dessiné en créant d'abord un élément HTML avec un identifiant ou une classe, puis en ajoutant le sélecteur d'identifiant ou de classe dans l'élément de style CSS pour faire référence à cet élément. Pour créer la forme d'une coche/coche sur l'interface de la page Web, différentes propriétés CSS telles que ' hauteur ”, “ largeur ”, “ tourner ' et ' couleur ” peut être utilisé selon le type et la taille de la coche souhaitée. Ce blog montre la méthode pour dessiner une coche/coche à l'aide de CSS.