Com dibuixar una marca de verificació amb CSS

” element contenidor amb un “ id ' o un ' classe ”:

< div id = 'marca de verificació' >< / div >

A la declaració HTML anterior, un ' div L'element ” s'ha afegit amb l'identificador declarat com a “ marca de verificació ”.

Mentre estileu l'element amb les propietats CSS, afegiu un ' id ” per referir-se a l'element HTML i, a continuació, especificar-hi propietats:

---

---

#marca de verificació
{
transformar: girar ( 45 graus ) ;
alçada : 45 píxels;
amplada : 20 píxels;
marge esquerre: 50 %;
vora inferior: verd fosc sòlid de 9 píxels;
vore-dreta: 9px sòlid verd fosc;
}

L'element d'estil CSS anterior té les propietats següents:

• El ' transformació: rotació (45 graus) ” fa girar les línies rectes verticals i horitzontals de tal manera que fa la forma d'un símbol de marca.
• El ' alçada ', la propietat estableix l'alçada del símbol de marca a ' 45 píxels ”.
• El ' amplada 'la propietat fa el símbol' 20 píxels ”ample.
• El ' marge-esquerra ” la propietat alinea el símbol de la marca al centre de la interfície de la pàgina web.
• Després d'això, el ' vora-baix ' i ' frontera-dreta ' Les propietats estableixen el pes de la vora de les dues línies a ' 9 píxels ' i defineix el ' verd fosc ” color per a ambdues línies que formen un símbol de marca complet.

Això crearà una marca de verificació simple de color verd o un símbol de verificació que es mostrarà al centre de la interfície de la pàgina web ' 45 píxels 'alt i' 20 píxels 'ample:

Mètode 2: inserció d'una marca de verificació utilitzant caràcters Unicode

També hi ha alguns caràcters Unicode que insereixen automàticament els símbols de la marca de verificació a la sortida sense necessitat d'estilitzar-los i definir els valors dels paràmetres. Per exemple, el caràcter Unicode ' U+2713 ” ajuda a afegir un simple símbol de marca a la sortida. De la mateixa manera, el caràcter Unicode “ U+2713 ” ajuda a inserir el símbol de marca blanca pesada a la sortida. Per saber com afegir aquests caràcters Unicode en un document HTML mitjançant una guia completa, feu clic aquí .

Conclusió

Es pot dibuixar una marca de verificació o un símbol de marca creant primer un element HTML amb un identificador o una classe i després afegint l'identificador o el selector de classe a l'element d'estil CSS per fer referència a aquest element. Per crear la forma d'una marca de verificació/tick a la interfície de la pàgina web, diferents propietats CSS com ' alçada ”, “ amplada ”, “ girar ' i ' color ” es pot utilitzar segons el tipus i la mida de la marca de verificació que es vulgui. Aquest bloc mostra el mètode per dibuixar una marca de verificació mitjançant CSS.