Come disegnare un segno di spunta/segno di spunta usando CSS

Un segno checkmark o un simbolo di zecche possono essere disegnati in HTML in diverse forme e colori usando diverse proprietà CSS. Per disegnare qualcosa attraverso un codice, è necessario impostare i valori dei parametri per quella forma attraverso alcune proprietà di stile come "altezza","larghezza","colore","confine", eccetera.

Questo articolo dimostrerà i seguenti approcci:

• Metodo 1: disegnare un simbolo checkmark/tick usando le proprietà CSS
• Metodo 2: inserire un segno di spunta/segno di spunta utilizzando i caratteri Unicode

Metodo 1: disegnare un simbolo checkmark/tick usando le proprietà CSS

Per disegnare un simbolo di spunta, il primo requisito è visualizzare come il segno di spunta guarderà alla fine perché può essere creato in qualsiasi dimensione o forma del colore. Sarà meglio capirlo con l'aiuto di un esempio.

Esempio
Ad esempio, lo sviluppatore vuole disegnare un semplice segno di spunta di colore verde usando le proprietà in stile CSS e visualizzarlo al centro dell'interfaccia. Nel codice HTML, è necessario creare un ""Elemento contenitore con un"id"O un"classe":

Nella dichiarazione HTML sopra, a "div"L'elemento è stato aggiunto con l'ID dichiarato come"segno di spunta".

Durante lo styling dell'elemento usando le proprietà CSS, aggiungi un "id"Selettore per fare riferimento all'elemento HTML e quindi specificare le proprietà al suo interno:

#segno di spunta

trasformazione: rotare (45DEG);
Altezza: 45px;
larghezza: 20px;
Margin-Left: 50%;
Border-Bottom: 9px Solid Darkolivegreen;
Bordo-destra: 9px Solid Darkolivegreen;

L'elemento in stile CSS sopra ha le seguenti proprietà:

• IL "Trasformazione: Ruota (45DEG)"Ruota le linee verticali e orizzontali dritte in modo tale da rendere la forma di un simbolo di zecche.
• IL "altezza"La proprietà imposta l'altezza del simbolo del segno di spunta su"45px".
• IL "larghezzaLa proprietà "fa il simbolo"20px" Largo.
• IL "margine-sinistra"La proprietà allinea il simbolo di spunta al centro dell'interfaccia della pagina web.
• Dopodiché, il "Border-Bottom" E "Bordo-destra"Proprietà impostare il peso del bordo di entrambe le linee su"9px"E definisci il"darkolivegreen"Colore per entrambe le linee che creano un simbolo di spunta completo.

Questo creerà un semplice segno di spunta o un simbolo di spunta di colore verde visualizzato al centro dell'interfaccia della pagina web "45px"Alto e"20px" Largo:

Metodo 2: inserire un segno di spunta/segno di spunta utilizzando i caratteri Unicode

Ci sono anche alcuni caratteri Unicode che inseriscono automaticamente i simboli del segno di spunta nell'output senza bisogno di modellare e definire i valori dei parametri per loro. Ad esempio, il carattere Unicode "U+2713"Aiuta ad aggiungere un semplice simbolo di spunta nell'output. Allo stesso modo, il carattere Unicode "U+2713"Aiuta a inserire il simbolo di zecche bianche pesanti nell'output. Per imparare come aggiungere questi caratteri Unicode in un documento HTML attraverso una guida completa, fare clic qui.

Conclusione

Un segno di spunta o un simbolo di spunta può essere disegnato prima creando un elemento HTML con un ID o una classe e quindi aggiungendo il selettore ID o classe nell'elemento in stile CSS per fare riferimento a quell'elemento. Per creare la forma di un segno di spunta/spuntare sull'interfaccia della pagina Web, diverse proprietà CSS come "altezza","larghezza","ruotare" E "colore"Può essere utilizzato in base al tipo e alle dimensioni del checkmark che si desidera. Questo blog dimostra il metodo per disegnare un segno di spunta/segno di spunta utilizzando CSS.