CSS Hexagon
Un hexágono es una forma geométrica matemática llamada un polígono que tiene 6 bordes. Para diseñar un hexágono, usaremos HTML y CSS."
CSS
CSS es principalmente de tres tipos. Cada tipo depende de la ubicación de su declaración. Uno está en línea, que está escrito dentro de las etiquetas HTML. El segundo es interno, escrito en la parte de la cabeza de las etiquetas HTML. Mientras que el tercero es CSS externo, que se declara fuera del código HTML y el archivo HTML en otro archivo con la extensión CSS. Iremos con el CSS interno para diseñar Hexagon. Las etiquetas de apertura y cierre para el CSS interno son:
Herramientas
Las herramientas básicas utilizadas para crear una página web estática simple son un editor de texto y cualquier navegador. Puede usar cualquier editor de texto, pero en este artículo, estamos utilizando un editor de texto predeterminado simple de Windows y Chrome como navegador. Escribimos el código o etiquetas HTML en el editor y ejecutamos ese archivo en el navegador.
Requisito previo
No hay algunos requisitos previos con respecto a ninguna herramienta o ningún software. Pero el usuario debe tener algunos conocimientos de etiquetas HTML, ya que los conceptos básicos son necesarios para construir un hexágono y diseñarlo. Las etiquetas HTML contienen dos partes principales, la cabeza y el cuerpo.
Mientras que otras etiquetas se explicarán con código en el momento de la implementación.
Implementación de Hexagon
Para la implementación, abra el bloc de notas e inicie el código HTML. Dentro de la parte de la cabeza, hemos usado el nombre del título como hexágono; Esto aparecerá en la pestaña. Dirigiéndose hacia CSS interno. Dentro de la etiqueta de estilo, hemos creado una explicación de la clase Hexagon.
En CSS, principalmente en un estilo interno y externo, para hacer que el código sea corto y fácilmente comprensible, utilizamos IDS y clases. Aquí surge la pregunta de cómo funcionan estas clases e identificación. Todas las características y efectos que queremos aplicar a cualquier objeto que estamos creando se mencionan dentro de la clase o el cuerpo de la identificación. Se accede a estas identificaciones y clases utilizando sus nombres dentro de las etiquetas donde queremos aplicar cualquier efecto. Así que aquí, hemos creado una identificación hexagonal dentro de la etiqueta de estilo. Esta identificación se aplicará al momento de crear el Hexagon. Dentro del cuerpo del hexágono, hemos declarado un lugar para dibujar la forma; Para esto, hemos usado dos características, una es la parte superior y la otra es la izquierda. La "parte superior" decide la distancia desde la parte superior hasta la forma. Y la izquierda decide la distancia desde el borde izquierdo hasta la forma. Se puede escribir en porcentaje o en cualquier otra unidad.
Arriba: 20;
Izquierda: 10%;
El borde marginal se establece como auto. De esta manera, la ubicación de la forma está establecida. Ahora aplicaremos un color a la forma. Este se da como el color de fondo. Hemos elegido la magenta.
Color de fondo: magenta;
El hexágono de polígono se forma teniendo esquinas o puntos curvos. Para que los puntos se curven, agregaremos una característica del radio de borde para que se curva suavemente en lugar de tener bordes rugosos.
Border-Radius: 10px;
Aquí el valor está escrito en la unidad de píxeles. Ahora decidiremos dar la forma, la altura y el ancho. Estas dos características son el bloque de construcción para crear y diseñar una forma. Cualquier forma o cualquier texto siempre se recomienda escribir o dibujar dentro de un cuadro especificado. Este cuadro ayuda a desinflar el objeto muy fácilmente. Entonces hemos declarado una caja fronteriza aquí.
CSS | Pseudo elementos/propiedad de clase
Esta propiedad se usa para rotar las líneas de forma a 60 grados, haciendo un hexágono perfecto. Un pseudo-elemento CSS es un tipo de estilo que se utiliza para diseñar una parte particular del elemento. Por ejemplo, estiliza la primera línea de la forma. Todos estos contenidos se aplican antes y después del contenido de la forma. Podemos aplicar cualquier característica de esta manera.
El contenido y la frontera son algunas características incorporadas de la propiedad de pseudo. Todas las demás características de altura, ancho y color son las mismas que hemos descrito en la descripción de identificación simple del hexágono.
Ahora todas las características anteriores se declaran como dos porciones que se aplicarán para formar un hexágono.
.Hexagon: antes
Transformar: girar (60 grados);
Una característica similar es para la porción restante del Hexagon; Todas las formas se crean utilizando un ángulo especificado para polígono 60 grados se forman entre cada dos líneas alternativas.
El estilo y las etiquetas de la cabeza están cerradas ahora. Asegúrese de que todas las etiquetas que abrieran deben estar cerradas para aplicarlas en el código; de lo contrario, se pueden perder algunos efectos. Ahora conduciendo hacia la parte del cuerpo.
Aquí hemos usado un simple encabezado de texto para escribir una línea. Este estilo es un ejemplo de estilo en línea.
< body style = "text-align : left"<
Hemos dado una alineación al texto que se mostrará en el lado izquierdo de la página web y dado el color de fuente como negro.
Después del texto, declararemos el código para la forma del hexágono. Div es un contenedor como una mesa en html. Que se usa para contener objetos en una posición recta. Dentro del cuerpo div, se declara que la clase CSS y el nombre de ID aplican todas las características del recipiente Div de la forma. Cierre todas las etiquetas abiertas, yo.mi., Div, cuerpo y html.
Guardamos el archivo del bloc de notas con el ".Extensión HTML ”para crear una página web. Este archivo se guarda como "muestra.html."Entonces, al usar esta extensión, el icono del archivo se establecerá como el icono del navegador predeterminado.
Cuando ejecutemos el archivo en el navegador, mostrará una página web que tiene un encabezado y una forma hexagonal en el lado izquierdo de la página.
Conclusión
Se forma un diagrama hexágono usando HTML incrustado con una hoja de estilo en cascada con él. Al principio, hablamos de los conceptos básicos de HTML. Y los tipos de CSS también se explican para eliminar cualquier tipo de ambigüedad con respecto a los tipos de CSS. Se mencionan dos herramientas básicas que son esenciales para la creación y ejecución de etiquetas HTML y CSS. El ejemplo de Hexagon se implementa y se explica línea por línea con el código y su uso. Se explica una forma única de crear una forma a través de la propiedad del pseudo elemento CSS. Al final, hemos mostrado la página web estática que se forma como resultado del código definido.