Hexágono CSS

“Una hoja de estilo en cascada es un fragmento de código que se utiliza para agregar efectos y funciones adicionales cuando se trabaja con etiquetas de lenguaje de marcado de hipertexto. El código HTML es una parte esencial de la creación y desarrollo de sitios web. Y del mismo modo, sin CSS, no basta con usar HTML, lo que lleva a los excesos. HTML, CSS y Javascript son tres herramientas básicas que se combinan para servir en muchos campos, incluidas páginas web estáticas y sitios web dinámicos, aplicaciones, etc. Además, HTML y CSS juegan un papel importante en el desarrollo de un sitio web en otro lenguaje de programación, es decir, C también juega un papel papel importante. En resumen, HTML crea los objetos y CSS los diseña. Este artículo trata sobre el diseño de un polígono en una página web. Un hexágono es una forma geométrica matemática llamada polígono que tiene 6 aristas. Para diseñar un hexágono usamos HTML y CSS”.

CSS

CSS consta principalmente de tres tipos. Cada tipo depende de la posición de su declaración. Uno está en línea, que está escrito en las etiquetas HTML. El segundo es interno y está escrito en la parte principal de las etiquetas HTML. El tercero es CSS externo, que se declara fuera del código HTML y del archivo HTML en otro archivo con extensión css. Nos ceñiremos al CSS interno cuando diseñemos hexágonos. Las etiquetas de apertura y cierre para el CSS interno son:

Herramienta

Las herramientas básicas 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 usaremos un editor de texto simple predeterminado de Windows y Chrome como navegador. Escribimos el código HTML o las etiquetas en el editor y ejecutamos este archivo en el navegador.

condición previa

No hay requisitos previos relacionados con ninguna herramienta o software. Sin embargo, el usuario debe tener algún conocimiento de las etiquetas HTML, ya que requiere los conceptos básicos de creación y diseño de un hexágono. Las etiquetas HTML constan de dos partes principales, cabeza y cuerpo.

Mientras que algunas otras etiquetas se declaran con código en el momento de la implementación.

Implementación de Hexágono

Para la implementación, abra el editor e inicie el código HTML. Dentro del encabezado usamos el nombre del título como un hexágono; Esto se muestra en la pestaña. De camino al CSS interno. Dentro de la etiqueta de estilo creamos una declaración de la clase Hexagon. En CSS, principalmente en el estilo interno y externo, usamos ID y clases para que el código sea corto y fácil de entender. Esto plantea la pregunta de cómo funcionan estas clases e ID. Todas las funciones y efectos que queremos aplicar a un objeto que creamos se mencionan en la clase o en el cuerpo del ID. Se accede a estos ID y clases usando sus nombres dentro de las etiquetas a las que queremos aplicar un efecto. Así que aquí hemos creado una ID hexagonal dentro de la etiqueta de estilo. Este ID se aplica en el momento en que se crea el hexágono. Dentro del cuerpo hexagonal hemos declarado un lugar para dibujar la forma; Para esto usamos dos características, una está arriba y la otra a la izquierda. El «pico» determina la distancia desde el pico hasta la forma. Y la izquierda determina la distancia desde el borde izquierdo hasta la forma. Se puede escribir en porcentaje o alguna otra unidad.

20 mejores;
Izquierda: 10%; El margen del borde se establece en automático. De esta manera la posición de la forma es completamente fija. Ahora vamos a aplicar un color a la forma. Esto se especifica como el color de fondo. Elegimos magenta.
color de fondo: magenta;
El hexágono poligonal se forma por tener esquinas o puntos curvos. Para hacer que los puntos sean curvos, agregaremos una función de radio de borde para que se curven suavemente en lugar de tener bordes ásperos.
radio del borde: 10px;
Aquí el valor se escribe en la unidad de píxel. Ahora decidimos la forma, la altura y el ancho. Estas dos funciones son los componentes básicos para crear y diseñar una forma. Siempre se recomienda escribir o dibujar cualquier forma o texto en un cuadro específico. Este campo ayuda a soltar el objeto muy fácilmente. Así que hemos declarado un cuadro de límite aquí.

CSS | Pseudoelementos/propiedad de clase

Esta propiedad se usa para rotar las líneas de forma 60 grados, creando un hexágono perfecto. Un pseudo elemento CSS es un tipo de estilo que se utiliza para diseñar una parte específica del elemento. Por ejemplo, diseña la primera línea del formulario. Todo este contenido se aplica antes y después del contenido del formulario. Podemos aplicar cualquier función de esta manera.

El contenido y el marco son algunas características integradas de pseudo-propiedades. Todas las demás características de alto, ancho y color son las mismas que describimos en la descripción de identificación simple del hexágono. Ahora todas las características anteriores se declaran como dos partes que se aplicarán para formar un hexágono. .hexágono: antes de {Transformar: rotación (60 grados);} Una función similar se aplica a la parte restante del hexágono; Todas las formas se crean utilizando un ángulo específico para polígonos de 60 grados formados entre dos líneas alternativas cualesquiera.

Las etiquetas de estilo y encabezado ahora están cerradas. Asegúrese de que todas las etiquetas que tenga abiertas deben estar cerradas para que se apliquen en el código; de lo contrario, se pueden perder algunos efectos. Ahora lleva a la parte del cuerpo. Aquí usamos un encabezado de texto simple para escribir una línea. Este estilo es un ejemplo de estilo en línea. < body style = "text-align : left"< Alineamos el texto que se mostrará en el lado izquierdo de la página web y configuramos el color de la fuente en negro.
Después del texto explicamos el código para la forma hexagonal. DIV es un contenedor como una tabla en HTML. Esto se utiliza para sostener objetos en una posición recta. Dentro del cuerpo div, la clase CSS y el nombre de ID se declaran para aplicar todas las funciones al contenedor div del formulario. Cierre todas las etiquetas abiertas, es decir, Div, cuerpo y Html. Guardamos el archivo del bloc de notas con extensión “.html” para crear una página web. Este archivo se guarda como «sample.html». Entonces, cuando use esta extensión, el ícono del archivo se establecerá como el ícono predeterminado del navegador.

Si ejecutamos el archivo en el navegador, aparecerá una página web con un encabezado y una forma de hexágono en el lado izquierdo de la página.

Conclusión

Un gráfico hexagonal se forma utilizando HTML incrustado con la hoja de estilo en cascada. Para empezar, hablemos de los conceptos básicos de HTML. Y también se explican los tipos de CSS para eliminar cualquier tipo de ambigüedad con respecto a los tipos de CSS. Se mencionan dos herramientas básicas que son esenciales para crear y ejecutar etiquetas HTML y CSS. El ejemplo de Hexagon se implementa y explica línea por línea con el código y su uso. La propiedad del pseudoelemento CSS explica una forma única de crear una forma. Al final mostramos la página web estática que se forma como resultado del código definido.