Cómo dibujar una marca de verificación/marca usando CSS

Se puede dibujar una marca de verificación o un símbolo de marca en HTML en diferentes formas y colores utilizando diferentes propiedades CSS. Para dibujar algo a través de un código, se requiere establecer los valores de los parámetros para esa forma a través de algunas propiedades de estilo como "altura","ancho","color","borde", etc.

Este artículo demostrará los siguientes enfoques:

• Método 1: dibujar una marca de verificación/símbolo de marca utilizando propiedades CSS
• Método 2: Insertar una marca de verificación/marca usando caracteres Unicode

Método 1: dibujar una marca de verificación/símbolo de marca utilizando propiedades CSS

Para dibujar un símbolo de garrapata, el primer requisito es visualizar cómo se verá la marca de tick en el final porque se puede crear en cualquier tamaño o forma de color. Será mejor entender esto con la ayuda de un ejemplo.

Ejemplo
Por ejemplo, el desarrollador quiere dibujar una marca de tic de color verde usando propiedades de estilo CSS y mostrarla en el centro de la interfaz. En el código HTML, se requiere crear un ""Elemento de contenedor con un"identificación"O un"clase":

En la declaración HTML anterior, un "div"El elemento se ha agregado con la identificación declarada como"marca de verificación".

Mientras diseña el elemento usando las propiedades CSS, agregue un "identificaciónSelector para referirse al elemento HTML y luego especificar propiedades dentro de él:

#marca de verificación

transformar: girar (45deg);
Altura: 45px;
Ancho: 20px;
margen izquierda: 50%;
Border-Bottom: 9px Solid Darkolivreen;
Border-Right: 9px Solid Darkolivreen;

El elemento de estilo CSS anterior tiene las siguientes propiedades:

• El "Transformar: Rotar (45 grados)"Gira las líneas verticales y horizontales rectas de tal manera que hace la forma de un símbolo de garrapata.
• El "altura"La propiedad establece la altura del símbolo de la marca a"45px".
• El "ancho"La propiedad hace el símbolo"20px" ancho.
• El "margen de pesaLa propiedad alinea el símbolo de tick al centro de la interfaz de la página web.
• Después de eso, el "borde" y "fronterizo"Las propiedades establecen el peso del borde de ambas líneas a"9px"Y defina el"oscuroColor para ambas líneas que hacen un símbolo completo de tic.

Esto creará una marca de verificación simple de color verde o un símbolo de tic que se muestra en el centro de la interfaz de la página web "45px"High y"20px" ancho:

Método 2: Insertar una marca de verificación/marca usando caracteres Unicode

También hay algunos caracteres unicode que insertan automáticamente los símbolos de la marca de verificación en la salida sin necesidad de peinar y definir valores de parámetros para ellos. Por ejemplo, el personaje unicode "U+2713"Ayuda a agregar un símbolo simple de tic en la salida. Del mismo modo, el personaje unicode "U+2713"Ayuda a insertar el símbolo blanco pesado en la salida. Para aprender a agregar estos caracteres unicode en un documento HTML a través de una guía completa, haga clic aquí.

Conclusión

Se puede dibujar una marca de verificación o un símbolo de marca creando primero un elemento HTML con una ID o una clase y luego agregando la ID o el selector de clase en el elemento de estilo CSS para referirse a ese elemento. Para crear la forma de una marca/marca de verificación en la interfaz de la página web, diferentes propiedades de CSS como "altura","ancho","girar" y "color"Se puede usar de acuerdo con el tipo y el tamaño de la marca de verificación que uno desea. Este blog demuestra el método para dibujar una marca de verificación/marca usando CSS.