Hvordan tegne et sjekkmerket/kryss ved hjelp av CSS

Et sjekkmerke eller et hake -symbol kan trekkes i HTML i forskjellige former og farger ved å bruke forskjellige CSS -egenskaper. For å tegne noe gjennom en kode, kreves det å angi parameterverdiene for den formen gjennom noen stylingegenskaper som "høyde”,“bredde”,“farge”,“grense", etc.

Denne artikkelen vil demonstrere følgende tilnærminger:

• Metode 1: Tegning av et hake/flåttsymbol ved hjelp av CSS -egenskaper
• Metode 2: Sett inn et hake/kryss ved hjelp av Unicode -tegn

Metode 1: Tegning av et hake/flåttsymbol ved hjelp av CSS -egenskaper

For å tegne et hake -symbol, er det første kravet å visualisere hvordan flåttmerket vil se på slutten fordi det kan opprettes i hvilken som helst fargestørrelse eller form. Det vil være bedre å forstå dette ved hjelp av et eksempel.

Eksempel
For eksempel ønsker utvikleren å tegne et grøntfarget enkelt flåttmerke ved hjelp av CSS-stilegenskaper og vise det i midten av grensesnittet. I HTML -koden er det påkrevd å opprette en "”Containerelement med et“id”Eller en“klasse”:

I ovennevnte HTML -setning, en “div”Element er lagt til med ID erklært som“hake”.

Mens du styler elementet ved hjelp av CSS -egenskapene, kan du legge til en "id”Selector for å referere til HTML -elementet og deretter spesifisere egenskaper inne i det:

#hake

Transform: roter (45deg);
Høyde: 45px;
Bredde: 20px;
Margin-venstre: 50%;
Border-Bottom: 9px Solid DarkoliveGreen;
Grense-høyre: 9px solid mørkolivegreen;

Ovennevnte CSS -stilelement har følgende egenskaper:

• “Transform: Rotate (45deg)”Roterer de rette vertikale og horisontale linjene på en slik måte som gjør formen til et flåttsymbol.
• “høyde”Eiendom setter høyden på flåttsymbolet til“45px”.
• “bredde”Eiendom gjør symbolet“20px" bred.
• “margin-venstre”Eiendom justerer flåttsymbolet til midten av grensesnittet.
• Etter det, “Border-Bottom”Og“Grense-høyre”Egenskaper setter grensevekten til begge linjene til“9px”Og definere“DarkoliveGreen”Farge for begge linjene som lager et komplett hake -symbol.

Dette vil skape et grøntfarget enkelt hake eller tick-symbol som vises i midten av websiden-grensesnittet "45px”Høy og“20px" bred:

Metode 2: Sett inn et hake/kryss ved hjelp av Unicode -tegn

Det er også noen Unicode -tegn som automatisk setter inn flåttmerkesymbolene i utgangen uten å måtte style og definere parameterverdier for dem. For eksempel Unicode -karakteren "U+2713”Hjelper med å legge til et enkelt hake -symbol i utgangen. Tilsvarende Unicode -karakteren “U+2713”Hjelper med å sette inn det hvite tunge flåttsymbolet i utgangen. For å lære hvordan du legger til disse Unicode -tegnene i et HTML -dokument gjennom en komplett guide, klikk her.

Konklusjon

Et hake eller et hake -symbol kan trekkes ved først å lage et HTML -element med en ID eller en klasse og deretter legge til ID- eller klassevelgeren i CSS -stilelementet for å referere til det elementet. For å lage formen på et hake/kryss på websiden -grensesnittet, er forskjellige CSS -egenskaper som "høyde”,“bredde”,“rotere”Og“farge”Kan brukes i henhold til typen og størrelsen på sjekkmerket man ønsker. Denne bloggen demonstrerer metoden for å tegne et sjekkmerket/kryss ved hjelp av CSS.