Como desenhar uma marca de seleção/marque usando CSS

Uma marca de seleção ou um símbolo de carrapato pode ser desenhado em HTML em diferentes formas e cores usando diferentes propriedades CSS. Para desenhar algo através de um código, é necessário definir os valores dos parâmetros para essa forma através de algumas propriedades de estilo como “altura","largura","cor","fronteira”, Etc.

Este artigo demonstrará as seguintes abordagens:

• Método 1: Desenho de uma marca de seleção/símbolo usando propriedades CSS
• Método 2: Inserindo uma marca de seleção/marque usando caracteres Unicode

Método 1: Desenho de uma marca de seleção/símbolo usando propriedades CSS

Para desenhar um símbolo de carrapato, o primeiro requisito é visualizar como a marca de tacilhas verá o final, porque ela pode ser criada em qualquer tamanho ou forma de cor. Será melhor entender isso com a ajuda de um exemplo.

Exemplo
Por exemplo, o desenvolvedor deseja desenhar uma marca de ticks simples de cor verde usando propriedades de estilo CSS e exibi-la no centro da interface. No código HTML, é necessário criar um “”Elemento de contêiner com um“eu ia"Ou um"aula”:

Na declaração HTML acima, uma “div”O elemento foi adicionado ao ID declarado como“Marca de seleção”.

Enquanto estiliza o elemento usando as propriedades CSS, adicione um “eu ia”Seletor para se referir ao elemento HTML e, em seguida, especificar propriedades dentro dele:

#Checkmark

Transformar: girar (45deg);
Altura: 45px;
Largura: 20px;
margem-esquerda: 50%;
fundo da borda: 9px Solid DarkoliveGreen;
Direito da borda: 9px Solid DarkoliveGreen;

O elemento de estilo CSS acima tem as seguintes propriedades:

• O "Transformar: Gire (45deg)”Gire as linhas verticais e horizontais retas de forma que faça a forma de um símbolo de carrapato.
• O "altura”Propriedade define a altura do símbolo de carrapato para“45px”.
• O "largura"Propriedade faz o símbolo"20px" largo.
• O "margem-esquerda”Propriedade alinha o símbolo do carrapato ao centro da interface da página da web.
• Depois disso, o “fundo de fronteira" e "fronteira-direita”Propriedades definem o peso da fronteira de ambas as linhas como“9px”E definir o“DarkoliveGreen”Cor para ambas as linhas que fazem um símbolo completo de carrapato.

Isso criará uma marca de seleção simples de cor verde ou símbolo de carrapato exibido no centro da interface da página da web “45px”High e“20px" largo:

Método 2: Inserindo uma marca de seleção/marque usando caracteres Unicode

Existem também alguns caracteres Unicode que inserem automaticamente os símbolos da marca de ticks na saída sem precisar estilizar e definir valores de parâmetros para eles. Por exemplo, o personagem Unicode “U+2713”Ajuda a adicionar um símbolo simples de carrapato na saída. Da mesma forma, o personagem Unicode “U+2713”Ajuda a inserir o símbolo de carrapato pesado branco na saída. Para aprender como adicionar esses caracteres Unicode em um documento HTML por meio de um guia completo, clique aqui.

Conclusão

Uma marca de seleção ou um símbolo de carrapato pode ser desenhado pela primeira vez criando um elemento HTML com um ID ou uma classe e depois adicionando o seletor de ID ou classe no elemento de estilo CSS para se referir a esse elemento. Para criar a forma de uma marca de seleção/marque na interface da página da web, diferentes propriedades CSS como “altura","largura","girar" e "cor”Pode ser usado de acordo com o tipo e tamanho da marca de seleção que deseja. Este blog demonstra o método para desenhar uma marca de seleção/carrapato usando CSS.