“Você deve ter se lembrado de que, quando estávamos no ensino médio, costumávamos fazer sessões de desenho para aprender o desenho. Tentamos quase todos os tipos de criação de forma e desenho em livros de desenho, eu.e., círculo, retângulo, quadrado, triângulo, polígono e muito mais. Uma dessas formas é "polígono". Diz -se que um polígono é uma forma com muitos lados. No HTML, também podemos criar uma forma de polígono de imagens ou recipientes ou simplesmente experimentar uma criação de polígonos à base de vetor. Neste tutorial, estaremos consumindo alguns exemplos para criar polígonos de todos esses tipos.”

Exemplo 01

Vejamos o nosso primeiro exemplo html para criar um polígono na página da web html. Para isso, precisamos gerar um html padrão “.HTML ”documento no código do Visual Studio. Iniciamos o exemplo html com o formato HTML padrão de tags usadas para criar uma página, i i.e., HTML, cabeça, estilo, corpo, etc. A etiqueta do elemento principal deste código contém uma tag "título" simples contendo um título para esta página. A etiqueta principal também contém estilo para esta página da web, mas estaremos pulando sua explicação por um tempo. Dentro da etiqueta corporal deste código HTML, usamos uma tag de título para o título de tamanho 1 padrão de HTML, i i.e., H1.

Uma tag "div" é usada para criar um contêiner na página da web html. Este contêiner conteria uma imagem usando a tag "IMG" seguida pelo atributo "src" para anexar o caminho de uma imagem com o atributo "alt" definido como "bitcoin". Após esse contêiner, nossa página HTML conteria um longo parágrafo de texto através do uso do

Tag para parágrafos HTML. Nosso script de página HTML foi concluído aqui. Então, estamos fechando a etiqueta do corpo como .

Agora, vamos dar uma olhada na tag de estilo para adicionar algum estilo ao recipiente "div" do nosso script html para criar uma forma de polígono. Em primeiro lugar, usamos a propriedade Float do CSS para puxar o recipiente para o lado esquerdo da página HTML junto com uma largura de 250px e altura de 160px. Estamos definindo a forma do exterior de um recipiente para o polígono.

Depois disso, a imagem também foi convertida na forma de polígono através do uso da propriedade padrão do Webkit Clip-Path. Esta propriedade usa a função POLYGON () para criar um polígono dos mesmos valores percentuais que usamos para o contêiner. O estilo e as tags de cabeça foram concluídos, e vamos executar este código.

Depois de executar esse código HTML dentro do navegador Chrome ou Internet Explorer, temos a saída mostrada do soldado. A forma padrão de polígono foi dada ao recipiente e a imagem foi adicionada a este contêiner convertendo -o em uma forma de polígono. Ao mesmo tempo, o parágrafo de texto foi exibido com a posição relativa do recipiente de polígono em nossa tela.

Exemplo 02

O primeiro exemplo foi sobre o uso de uma função simples de polígono com a propriedade Clip-Path para prender a imagem e convertê-la em uma forma de polígono. Dentro deste exemplo, criaremos um polígono de pelo menos 4 arestas com a ajuda de propriedades simples de polígono ou tag. Então, começamos o exemplo com o identificador HTML rastreado pela etiqueta da cabeça. Esta tag principal usa a tag de título para dar um título à nossa página HTML. Não usamos nenhuma tag de estilo porque estaremos realizando o estilo em linha neste exemplo de código. Então, o "corpo" desta página HTML foi iniciado com a etiqueta "corpo", eu.e., . Segue a tag de título

Para esta página.

Depois disso, estamos utilizando a tag "SVG" para fazer uso de gráficos vetoriais padrão para a criação de uma forma de polígono. A altura e a largura foram definidas como 400px para a área "SVG" na página HTML. Iniciamos a etiqueta com os "pontos" de deslocamento a serem usados ​​para a criação de um polígono. Esses pontos estariam dizendo o valor X e Y para a borda específica. Você pode usar o mais inúmeras bordas possível. Temos usado apenas 5 conforme o número total de vírgulas. O estilo em linha tem sido usado com a palavra -chave "estilo" e usamos a propriedade "preenchimento" para encher o polígono com alguma cor verde claro selecionada no esquema de cores padrão RGB. Junto com isso, a propriedade de AVC foi usada para criar um contorno de fronteira para o polígono de alguma cor roxa, e a propriedade de largura de derrame está definindo a espessura da borda do polígono para 7px. O "SVG" e o corpo desta página foram concluídos, e podemos executar esse código no código do Visual Studio agora.

A saída para o código HTML do polígono exibia um título simples com um polígono de 4 lados. Embora tenha 5 lados, o 5º está oculto devido ao uso de um pequeno valor para um lado. Você pode ver que a forma do polígono foi preenchida com uma cor verde clara e uma borda roxa.

Exemplo 03

Vamos dar uma olhada em outro exemplo para criar uma forma de polígono em nossa página HTML. Para isso, estaremos consumindo uma tag SVG semelhante em nosso código HTML. Então, a partir do arquivo de código do Visual Studio, adicionamos uma tag html seguida pela tag padrão. Desta vez, não estamos usando a tag de cabeça, título ou estilo, porque podemos executar toda a decoração vetorial usando a tag SVG simples dentro do corpo de um código HTML.

Dentro da etiqueta corporal deste código, iniciamos a tag e especificamos a largura e a altura da área SVG na página HTML. Depois disso, usamos a etiqueta de polígono para criar um novo polígono e adicionamos seus pontos e estilo. Temos adicionado um total de 5 arestas ou pontos para este polígono com os diferentes valores de eixo x e y. Essas bordas são colocadas nas posições definidas de acordo com a página HTML. O polígono será preenchido com cor roxa, e seu fundo será de cor rosa carmesim. Junto com isso, a propriedade de largura de derrame foi fixada em 5, e a regra de preenchimento foi definida como ímpar. Isso significa que onde as bordas de um polígono se cruzam, a cor seria preenchida apenas lá.

Depois de executar este código HTML no navegador Chrome, temos a saída mostrada do sol-bellow, i.e., Star Polygon, na tela da página da web. Este polígono de estrela tem 5 bordas com uma borda carmesim e rosa e cones cheios. Você pode ver que a área interna de uma estrela foi deixada sem preenchimento. É porque usamos a propriedade de preenchimento definida para uniformes.

Conclusão

No primeiro parágrafo, discutimos o uso e a evolução das formas em nossa vida, juntamente com seu uso em script html. Junto com isso, elaboramos três exemplos muito diferentes de script html para criar diferentes tipos de polígonos, eu.e., cada um contém um número diferente de lados e bordas. Para isso, tentamos usar a função de polígono, tag polígono e tag SVG para criar formas baseadas em vetores, propriedades de clipes, pontos de polígono e propriedades de AVC.