Jak narysować znak wyboru/kleszka za pomocą CSS

Znak wyboru lub symbol kleszczy można narysować w HTML w różnych kształtach i kolorach za pomocą różnych właściwości CSS. Aby narysować coś za pomocą kodu, konieczne jest ustawienie wartości parametrów dla tego kształtu za pomocą niektórych właściwości stylizacji, takich jak „wysokość”,„szerokość”,„kolor”,„granica”Itd.

W tym artykule pokazuje następujące podejścia:

• Metoda 1: Rysowanie symbolu znakowego/kleszcza za pomocą właściwości CSS
• Metoda 2: Wstawienie znaku wyboru/kleszcza za pomocą znaków Unicode

Metoda 1: Rysowanie symbolu znakowego/kleszcza za pomocą właściwości CSS

Aby narysować symbol kleszczy, pierwszym wymogiem jest wizualizacja, jak wyświetli się znak kleszczy na koniec, ponieważ można go utworzyć w dowolnym rozmiarze lub kształcie koloru. Lepiej będzie to zrozumieć za pomocą przykładu.

Przykład
Na przykład programista chce narysować prosty znak kleszczy w kolorze zielonym za pomocą właściwości stylu CSS i wyświetlić go na środku interfejsu. W kodzie HTML konieczne jest utworzenie „„Element kontenera z„ID”Lub„klasa”:

W powyższym oświadczeniu HTML „A„div„Element został dodany z ID ogłoszonym jako„Znak wyboru".

Podczas stylizacji elementu za pomocą właściwości CSS dodaj „ID„Selektor, aby odnieść się do elementu HTML, a następnie określić właściwości w nim:

#Checkmark

Transform: Rotate (45DEG);
Wysokość: 45px;
szerokość: 20px;
margines lewica: 50%;
Bottom graniczny: 9px Solid DarkoliveGreen;
Prawa graniczna: 9px Solid DarkoliveGreen;

Powyższy element stylu CSS ma następujące właściwości:

• „„Transform: Rotate (45DEG)”Obraca proste linie pionowe i poziome w taki sposób, który tworzy kształt symbolu kleszcza.
• „„wysokość„Właściwość ustawia wysokość symbolu kleszcza na„45px".
• „„szerokość„Własność sprawia, że ​​symbol„20px" szeroki.
• „„margines lewic”Właściwość wyrównuje symbol kleszcza do środka interfejsu strony internetowej.
• Potem „„Bottom graniczny" I "prawej granicy„Właściwości ustawiają ciężar graniczny obu linii do„9px”I zdefiniuj„Darkolivegreen”Kolor dla obu linii, które stanowią pełny symbol kleszczy.

Utworzy to zielone proste znak wyboru lub symbol kleszcza wyświetlany na środku interfejsu strony internetowej „45px”Wysokie i„20px" szeroki:

Metoda 2: Wstawienie znaku wyboru/kleszcza za pomocą znaków Unicode

Istnieją również kilka znaków Unicode, które automatycznie wkładają symbole znaku kleszcza do wyjścia bez konieczności stylizowania i definiowania dla nich wartości parametrów. Na przykład postać Unicode „U+2713”Pomaga dodać prosty symbol kleszczy w wyjściu. Podobnie postać Unicode „U+2713”Pomaga wstawić biały symbol ciężkiego kleszcza do wyjścia. Aby dowiedzieć się, jak dodać te znaki Unicode w dokumencie HTML za pośrednictwem pełnego przewodnika, kliknij tutaj.

Wniosek

Znak wyboru lub symbol kleszczy można narysować, najpierw utworzenie elementu HTML z identyfikatorem lub klasą, a następnie dodanie identyfikatora lub selektora klasy w elemencie stylu CSS, aby odnieść się do tego elementu. Aby utworzyć kształt znaku wyboru/kleszcza na interfejsie strony internetowej, różne właściwości CSS, takie jak „wysokość”,„szerokość”,„obracać się" I "kolor”Może być używane zgodnie z typem i rozmiarem znaku wyboru. Ten blog pokazuje metodę rysowania znaku kontrolnego/kleszcza za pomocą CSS.