“Debes haber recordado que cuando estábamos en la escuela secundaria, solíamos tomar sesiones de dibujo para aprender a dibujar. Hemos probado casi todos los tipos de creación de forma y dibujo en los libros de dibujo, yo.mi., círculo, rectángulo, cuadrado, triángulo, polígono y muchos más. Una de esas formas es el "polígono". Se dice que un polígono es una forma con muchos lados. Dentro de HTML, también podemos crear una forma de polígono de imágenes o contenedores o simplemente probar una creación de polígono basado en vectores. En este tutorial, consumiremos algunos ejemplos para crear polígonos de todos esos tipos."

Ejemplo 01

Veamos nuestro primer ejemplo de HTML para crear un polígono en la página web HTML. Para esto, necesitamos generar un HTML estándar ".Documento HTML "en el código de Visual Studio. Hemos comenzado el ejemplo HTML con el formato HTML estándar de las etiquetas utilizadas para crear una página, I.mi., Html, cabeza, estilo, cuerpo, etc. La etiqueta del elemento principal de este código contiene una etiqueta simple de "título" que contiene un título para esta página. La etiqueta de cabeza también contiene un estilo para esta página web, pero saltaremos su explicación por un tiempo. Dentro de la etiqueta del cuerpo de este código HTML, hemos estado utilizando una etiqueta de encabezado para el encabezado de tamaño 1 estándar de HTML, I.mi., H1.

Se utiliza una etiqueta "div" para crear un contenedor en la página web HTML. Este contenedor contendría una imagen utilizando la etiqueta "IMG" seguida del atributo "SRC" para adjuntar la ruta de una imagen con el atributo "Alt" establecido en "Bitcoin". Después de este contenedor, nuestra página HTML contendría un largo párrafo de texto mediante el uso del

Etiqueta para párrafos HTML. Nuestra secuencia de comandos de página HTML se ha completado aquí. Entonces, estamos cerrando la etiqueta del cuerpo como .

Ahora, echaremos un vistazo a la etiqueta de estilo para agregar algo de estilo al contenedor "div" de nuestro script HTML para crear una forma de polígono. En primer lugar, hemos estado utilizando la propiedad flotante de CSS para tirar del contenedor al lado izquierdo de la página HTML junto con un ancho de 250px y altura de 160px. Hemos estado estableciendo la forma del exterior de un recipiente al polígono.

Después de eso, la imagen también se ha convertido a la forma de polígono mediante el uso de la propiedad estándar de clip de webkit. Esta propiedad utiliza la función Polygon () para crear un polígono de los mismos valores porcentuales que hemos utilizado para el contenedor. Se han completado el estilo y las etiquetas principales, y vamos a ejecutar este código.

Después de ejecutar este código HTML dentro del navegador Chrome o Internet Explorer, tenemos la salida de Below Shows. La forma estándar de polígono se ha dado al contenedor, y la imagen se ha agregado a este contenedor convirtiéndolo en forma de polígono. Al mismo tiempo, el párrafo de texto se ha mostrado con la posición relativa del contenedor de polígono en nuestra pantalla.

Ejemplo 02

El primer ejemplo fue sobre el uso de una función de polígono simple con la propiedad Clip-Path para recortar la imagen y convertirla en forma de polígono. Dentro de este ejemplo, crearemos un polígono de al menos 4 bordes con la ayuda de una propiedad o etiqueta de polígono simple. Entonces, hemos comenzado el ejemplo con el identificador HTML rastreado por la etiqueta de la cabeza. Esta etiqueta de cabeza usa la etiqueta de título para dar un título a nuestra página HTML. No hemos estado usando ninguna etiqueta de estilo porque realizaremos el estilo en línea en este código de ejemplo. Entonces, el "cuerpo" de esta página HTML se ha iniciado con la etiqueta "cuerpo", yo.mi., . Sigue la etiqueta de encabezado

Para esta página.

Después de esto, hemos estado utilizando la etiqueta estándar "SVG" para utilizar gráficos vectoriales estándar para la creación de una forma de polígono. La altura y el ancho se han establecido en 400px para el área "SVG" en la página HTML. Hemos comenzado la etiqueta con los "puntos" compensados ​​que se utilizarán para la creación de un polígono. Estos puntos le dirían el valor X e Y para el borde específico. Puede usar lo más numerosos bordes como sea posible. Hemos estado usando solo 5 según el número total de comas. El estilo en línea se ha utilizado con la palabra clave "estilo", y hemos estado utilizando la propiedad "llenar" para llenar el polígono con un color verde claro seleccionado del esquema de color estándar RGB. Junto con eso, la propiedad de accidente cerebrovascular se ha utilizado para crear un contorno del borde para el polígono de un color púrpura, y la propiedad del ancho del accidente. Se han completado el "SVG" y el cuerpo de esta página, y podemos ejecutar este código en el código de Visual Studio ahora.

La salida para el código HTML Polygon ha estado mostrando un encabezado simple con un polígono de 4 lados. Aunque tiene 5 lados, el quinto está oculto debido al uso de un pequeño valor para un lado. Puedes ver que la forma del polígono se ha llenado con un color verde claro y un borde morado.

Ejemplo 03

Echemos un vistazo a otro ejemplo para crear una forma de polígono en nuestra página HTML. Para esto, consumiremos una etiqueta SVG similar en nuestro código HTML. Entonces, a partir del archivo de código de Visual Studio, hemos agregado una etiqueta HTML seguida de la etiqueta estándar. Esta vez, no estamos usando la cabeza, el título o la etiqueta de estilo porque podemos realizar toda la decoración vectorial utilizando la etiqueta SVG simple dentro del cuerpo de un código HTML.

Dentro de la etiqueta del cuerpo de este código, hemos iniciado la etiqueta y especificamos el ancho y la altura para el área SVG en la página HTML. Después de eso, utilizamos la etiqueta de polígono para crear un nuevo polígono y agregamos sus puntos y estilo. Hemos estado agregando un total de 5 bordes o puntos para este polígono con los diferentes valores de eje x e y. Estos bordes se colocan en las posiciones establecidas de acuerdo con la página HTML. El polígono se llenará de color morado, y su fondo será de color rosa carmesí. Junto con eso, la propiedad de ancho de accidente cerebrovascular se ha fijado a 5, y la regla de relleno se ha establecido en impar. Esto significa que cuando los bordes de un polígono se cruzan, el color se llenaría allí solo.

Después de ejecutar este código HTML en el navegador Chrome, tenemos la salida de Below Shows, i.mi., Star Polygon, en la pantalla de la página web. Este polígono estrella obtuvo 5 bordes con un borde carmesí, rosa y conos llenos. Puedes ver que el área interior de una estrella se ha dejado sin llenar. Es porque hemos usado la propiedad de regla de relleno establecida en Even-ODD.

Conclusión

Dentro del primer párrafo, hemos discutido el uso y la evolución de las formas en nuestra vida junto con su uso en las secuencias de comandos HTML. Junto con eso, hemos elaborado tres ejemplos muy diferentes de secuencias de comandos HTML para crear diferentes tipos de polígonos, I.mi., Cada uno contiene un número diferente de lados y bordes. Para esto, intentamos usar la función Polygon, la etiqueta de polígono y la etiqueta SVG para crear formas basadas en vectores, propiedades de clip-ruta, puntos de polígono y propiedades de trazo.