CSS Hexagon
Um hexágono é uma forma geométrica matemática chamada polígono com 6 arestas. Para projetar um hexágono, usaremos HTML e CSS.”
CSS
CSS é principalmente de três tipos. Cada tipo depende da localização de sua declaração. Um está embutido, que é escrito dentro das tags html. O segundo é interno, escrito na parte da cabeça das tags html. Enquanto o terceiro é o CSS externo, que é declarado fora do código HTML e do arquivo html em outro arquivo com a extensão CSS. Iremos com o CSS interno na criação de hexágono. As tags de abertura e fechamento para os CSs internos são:
Ferramentas
As ferramentas básicas usadas para criar uma página estática simples são um editor de texto e qualquer navegador. Você pode usar qualquer editor de texto, mas neste artigo, estamos usando um simples editor de texto padrão do Windows e Chrome como navegador. Escrevemos o código HTML ou tags no editor e executamos esse arquivo no navegador.
Pré -requisito
Não há alguns pré -requisitos sobre nenhuma ferramenta ou software. Mas o usuário deve ter algum conhecimento de tags html, pois o básico é necessário na construção de um hexágono e na criação. Tags HTML contêm duas partes principais, cabeça e corpo.
Enquanto algumas outras tags serão explicadas com código no momento da implementação.
Implementação do hexágono
Para a implementação, abra o bloco de notas e inicie o código HTML. Dentro da parte da cabeça, usamos o nome do título como hexágono; Isso aparecerá na guia. Indo para CSS interno. Dentro da etiqueta de estilo, criamos uma explicação da aula de hexagon.
No CSS, principalmente no estilo interno e externo, para tornar o código curto e facilmente compreensível, fazemos uso de IDs e classes. Aqui surge a pergunta de como essas classes e id funcionam. Todos os recursos e efeitos que queremos aplicar a qualquer objeto que estamos criando são mencionados dentro da classe ou o corpo do ID. Esses IDs e aulas são acessados usando seus nomes dentro das tags onde queremos aplicar qualquer efeito. Então, aqui, criamos um ID de hexagon dentro da etiqueta de estilo. Este ID será aplicado no momento da criação do hexágono. Dentro do corpo hexágono, declaramos um local para desenhar a forma; Para isso, usamos dois recursos, um é o topo, e o outro é a esquerda. O "topo" decide a distância de cima para a forma. E a esquerda decide a distância da borda esquerda para a forma. Pode ser escrito em porcentagem ou em qualquer outra unidade.
Topo: 20;
Esquerda: 10%;
A borda marginal é definida como automóvel. Dessa forma, a localização da forma está toda definida. Agora vamos aplicar uma cor à forma. Esta é dada como a cor de fundo. Nós escolhemos o magenta.
Background-Color: Magenta;
O hexágono de polígono é formado por cantos ou pontos curvos. Para fazer os pontos curvados, adicionaremos uma característica do raio da borda para torná -lo curvado suavemente em vez de ter bordas ásperas.
Radio de fronteira: 10px;
Aqui o valor está escrito na unidade de pixels. Agora vamos decidir dar a forma, altura e largura. Esses dois recursos são o bloco de construção para criar e estilizar uma forma. Qualquer forma ou texto é sempre recomendado para ser escrito ou desenhado dentro de uma caixa especificada. Esta caixa ajuda a negociar o objeto com muita facilidade. Então, declaramos uma caixa de fronteira aqui.
CSS | Pseudo Elements/Class Property
Esta propriedade é usada para girar as linhas de forma a 60 graus, fazendo um hexágono perfeito. Um pseudo-elemento CSS é um tipo de estilo que é usado para estilizar uma parte particular do elemento. Por exemplo, ele estiliza a primeira linha da forma. Todo esse conteúdo é aplicado antes e depois do conteúdo da forma. Podemos aplicar qualquer recurso dessa maneira.
O conteúdo e a fronteira são alguns recursos internos da propriedade pseudo. Todas as outras características de altura, largura e cor são as mesmas que descrevemos na descrição simples do ID do hexágono.
Agora todos os recursos acima são declarados como duas porções a serem aplicadas para formar um hexágono.
.Hexágono: antes
Transformar: girar (60deg);
Uma característica semelhante é para a parte restante do hexágono; Todas as formas são criadas usando um ângulo especificado para o polígono 60 graus é formado entre a cada duas linhas alternativas.
O estilo e as tags de cabeça estão fechadas agora. Verifique se todas as tags que você abriu devem ser fechadas para aplicá -las no código; Caso contrário, alguns efeitos podem ser perdidos. Agora levando para a parte do corpo.
Aqui usamos um título simples de texto para escrever uma linha. Este estilo é um exemplo de estilo embutido.
< body style = "text-align : left"<
Damos um alinhamento ao texto a ser exibido no lado esquerdo da página da web e damos a cor da fonte como preto.
Após o texto, declararemos o código para a forma de hexágono. Div é um recipiente como uma mesa em HTML. Que é usado para conter objetos em uma posição reta. Dentro do corpo da div, a classe CSS e o nome de identificação são declarados para aplicar todos os recursos no contêiner da forma da forma. Feche todas as tags abertas, eu.e., Div, corpo e html.
Salvamos o arquivo do bloco de notas com o “.Extensão HTML ”para criar uma página da web. Este arquivo é salvo como “amostra.html.”Então, usando esta extensão, o ícone do arquivo será definido como o ícone do navegador padrão.
Quando executamos o arquivo no navegador, ele exibe uma página da web com um título e uma forma de hexágono no lado esquerdo da página.
Conclusão
Um diagrama de hexagon é formado usando HTML incorporado com uma folha de estilo em cascata com ele. No início, falamos sobre o básico do HTML. E os tipos de CSS também são explicados para eliminar qualquer tipo de ambiguidade em relação aos tipos de CSS. São mencionadas duas ferramentas básicas essenciais para a criação e execução de tags HTML e CSS. O exemplo hexágono é implementado e explicado linha por linha com o código e seu uso. Uma maneira única de criar uma forma é explicada através da propriedade pseudo-elemante CSS. No final, mostramos a página estática que é formada como resultado do código definido.