Construindo figuras geométricas usando apenas CSS

COMPARTILHE:

Nessa dica bem legal é possível implementar figuras geométricas sem perder qualidade e ao mesmo tempo ganhar velocidade no carregamento de páginas web, como posts em blogs e sites, usando apenas alguns códigos em CSS.

Quando não é a Matemática ajudando diversos ramos da Ciência ou interligando situações do nosso cotidiano, é a tecnologia ajudando a Matemática para organizar-se melhor ainda. Nessa dica bem legal é possível implementar figuras geométricas sem perder qualidade e ao mesmo tempo ganhar velocidade no carregamento de páginas web, como posts em blogs e sites, usando apenas alguns códigos em CSS.

Construindo figuras geométricas usando apenas CSS

Logo abaixo algumas figuras como: quadrado, retângulo, círculo, elipse (oval), triângulos, paralelogramo, trapézio e outras mais.


Quadrado



Retângulo





Círculo




Elipse (popularmente chamado de Oval)





Triângulo




Paralelogramo 
 



Trapézio (Nesse caso, isósceles)


Nos links abaixo estão os códigos para implementar outras figuras geométricas.

Fonte: css-tricks.com.

COMENTÁRIOS

BLOGGER: 4
  1. Interessante. E ainda mais porque são comandas bem básicos que todos já conhecem, com exceção do paralelogramo. Eu nunca tinha visto esse skew.

    ResponderExcluir
    Respostas
    1. Olá, Eri!

      Na época que lancei o artigo em 2011, também fiquei surpreso.

      Obrigado por sua presença aqui.

      Abraço!

      Excluir
  2. Algumas figuras não dão certo com Box Model Corrigido para box-sizing: border-box, mas consegui fazer todas com alguns ajustes. Obrigado pelo artigo!!!

    ResponderExcluir
    Respostas
    1. Olá, Heitor!

      Este artigo é de 2011 e realmente estou surpreso por você ter conseguido implementar algo. Sabemos que estas tecnologias atualizam muito rapidamente.

      Um abraço cara!

      Excluir

Nome

android,27,aplicações matemáticas,119,Aprender Matemática,30,Artigo Convidado,50,Biologia,1,blog,49,Blogger,3,Camisetas de exatas,3,Carl Sagan Day,1,chrome,9,cinema,12,Concursos,3,Curiosidades matemáticas,102,curso online,10,Desafios matemáticos,44,destaque,1,determinantes,3,Dia do Estudante,1,Dia do Professor,10,Diario Escolar Digital,5,Dica de economia,4,dica de livro,32,Dica para professor,43,divulgação,60,E-book,4,Editorial,21,educação,106,ENEM,1,ensino,139,Entrevista,8,eventos,19,excel,24,extensões,11,Facebook,8,feira do livro,4,firefox,2,frações,6,funções,9,geogebra,78,GifsMatemáticos,5,google,42,história da matemática,40,humor,58,IMO,2,InternetJusta,1,iOS,19,iPad,7,iPhone,3,jogos,27,Katex,1,Latex,20,LibreOffice,11,linux,49,Livro GeoGebra,5,Mapa Mental,1,Matemática e profissões,20,Matemático do dia,27,Materiais GeoGebra,23,Mathjax,2,Netflix,7,Noticias,132,OBMEP,1,One Strange Rock,1,Papel milimetrado,4,Pi Day,16,piadas matemáticas,13,PodCast,4,política,3,premiações,7,professor,6,promoção,13,Quiz,22,Resenhas de Livros,1,Resposta Desafios,1,Sebastião Vieira,22,software,18,Software Livre,50,Tabuada,5,TCC,17,Telegram,8,TexMath,4,TIC,32,Top artigos,4,ubuntu,15,Videos,104,wallpapers matemáticos,23,Widgets,26,windows,41,wolfram alpha,30,Youtube,16,
ltr
item
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática: Construindo figuras geométricas usando apenas CSS
Construindo figuras geométricas usando apenas CSS
Nessa dica bem legal é possível implementar figuras geométricas sem perder qualidade e ao mesmo tempo ganhar velocidade no carregamento de páginas web, como posts em blogs e sites, usando apenas alguns códigos em CSS.
https://3.bp.blogspot.com/-mUF_-j1Gcdg/Vv_2Ftq6mFI/AAAAAAAAjd8/dRksytNrnKQsQ2icdQxfHw594aJRqbtbQ/s1600/construindo-figuras-geometricas-usando-apenas-CSS.png
https://3.bp.blogspot.com/-mUF_-j1Gcdg/Vv_2Ftq6mFI/AAAAAAAAjd8/dRksytNrnKQsQ2icdQxfHw594aJRqbtbQ/s72-c/construindo-figuras-geometricas-usando-apenas-CSS.png
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática
https://www.prof-edigleyalexandre.com/2011/08/construindo-figuras-geometricas-usando.html
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/2011/08/construindo-figuras-geometricas-usando.html
true
125900602153146940
UTF-8
Carregar mais posts Não foram encontrados posts VER TODOS Leia mais Responder Cancelar resposta Delete Por Início PÁGINAS POSTS VER TODOS RECOMENDADOS PARA VOCÊ CATEGORIA ARQUIVO PESQUISE TODOS OS POSTS Não foi encontrada nenhuma correspondência de postagem com sua solicitação VOLTAR Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir ESTE CONTEÚDO PREMIUM ESTÁ BLOQUEADO PASSO 1: Compartilhar em uma rede social PASSO 2: Clique no link da sua rede social Copiar todo o código Selecioinar todo o código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar