So zeichnen Sie mit CSS ein Checkmark/Tick

Ein Checkmark oder ein Zeckensymbol kann in HTML in verschiedenen Formen und Farben unter Verwendung verschiedener CSS -Eigenschaften gezeichnet werden. Um etwas durch einen Code zu zeichnen, muss die Parameterwerte für diese Form durch einige Styling -Eigenschaften wie festgelegt werdenHöhe","Breite","Farbe","Grenze", usw.

Dieser Artikel zeigt die folgenden Ansätze:

• Methode 1: Zeichnen eines Checkmark/Tick -Symbols mit CSS -Eigenschaften
• Methode 2: Einfügen eines Checkmarks/Ticks mit Unicode -Zeichen

Methode 1: Zeichnen eines Checkmark/Tick -Symbols mit CSS -Eigenschaften

Um ein Zeckensymbol zu zeichnen, besteht die erste Anforderung darin, zu visualisieren, wie die Zeckenmarke das Ende betrachtet, da es in jeder Farbgröße oder -form erstellt werden kann. Es wird besser sein, dies mit Hilfe eines Beispiels zu verstehen.

Beispiel
Zum Beispiel möchte der Entwickler mithilfe von CSS-Stileigenschaften eine grüne einfache Tick-Marke zeichnen und in der Mitte der Schnittstelle anzeigen. Im HTML -Code ist es erforderlich, ein "zu erstellen""Containerelement mit einem"Ausweis" oder ein "Klasse”:

In der obigen HTML -Aussage eine ““div"Element wurde mit der ID hinzugefügt, die als" als "deklariert" hinzugefügt wurde "Häkchen”.

Fügen Sie beim Stylen des Elements mit den CSS -Eigenschaften eine hinzuAusweisSelektor, um sich auf das HTML -Element zu beziehen und dann Eigenschaften darin anzugeben:

#Häkchen

Transformation: Drehen (45 Grad);
Höhe: 45px;
Breite: 20px;
Margin-Links: 50%;
Border-Bottom: 9PX Solid DarkoliveGreen;
Grenze-Rechts: 9px solides darkoliveGreen;

Das obige CSS -Stilelement hat die folgenden Eigenschaften:

• Der "Transformation: Drehen (45 Grad)”Dreht die geraden vertikalen und horizontalen Linien so, dass die Form eines Zeckensymbols entsteht.
• Der "Höhe”Eigenschaft setzt die Höhe des Zeckensymbols auf“45px”.
• Der "Breite"Eigenschaft macht das Symbol"20px" breit.
• Der "linksDie Eigenschaft richtet das Zeckensymbol mit dem Zentrum der Webseitenschnittstelle aus.
• Danach das "Grenzboden" Und "Grenzrechte"Eigenschaften setzen das Randgewicht beider Linien auf"9px"Und definieren Sie das"DarkoliveGreenFarbe für beide Zeilen, die ein komplettes Zeckensymbol ergeben.

Dadurch wird ein umweltfarbes einfaches Check-Mark oder ein Zeckensymbol erstellt, das in der Mitte der Webseitenoberfläche angezeigt wird45px”Hoch und“20px" breit:

Methode 2: Einfügen eines Checkmarks/Ticks mit Unicode -Zeichen

Es gibt auch einige Unicode -Zeichen, die die Tick -Mark -Symbole automatisch in die Ausgabe einfügen, ohne die Parameterwerte für sie zu stylen und zu definieren. Zum Beispiel der Unicode -Charakter “U+2713”Hilft bei der Ausgabe ein einfaches Zeckensymbol hinzu. Ebenso der Unicode -Charakter “U+2713”Hilft beim Einfügen des weißen schweren Zeckensymbols in die Ausgabe ein. Klicken Sie hier, um zu erfahren, wie Sie diese Unicode -Zeichen in einem HTML -Dokument über eine vollständige Anleitung hinzufügen.

Abschluss

Ein Check -Mark oder ein Zeckensymbol kann gezeichnet werden. So erstellen Sie die Form eines Check -Marks/Ticks auf der Webseitenschnittstelle, verschiedene CSS -Eigenschaften wie “Höhe","Breite","drehen" Und "Farbe”Kann je nach Typ und Größe des Checkmarks verwendet werden. Dieser Blog zeigt die Methode zum Zeichnen eines Schecks/Ticks mit CSS.