Desenhando um triângulo usando somente CSS

Olá a todos, nesse tutorial veremos como desenhar um triângulo utilizando somente CSS. Esse assunto gerou uma discussão com os webdesigners da agência, onde tentávamos entender como funcionava a lógica por de trás de simplesmente utilizar o copy paste do site onde vimos esse efeito.

Preview TrianguloPrimeiramente o resultado final será conforme esse ao lado. Mas a grande pergunta é, como vamos desenhar esse triângulo utilizando somente CSS? Me fiz essa pergunta muitas vezes antes de entender qual é o pensamento para formar a forma triangular. Quando utilizamos a propriedade border do CSS, temos a impressão que suas pontas são quadradas pois nunca vemos divisória alguma, mas na verdade as bordas geram suas pontas na diagonal para um encaixe perfeito entre todos os lados das bordas de um quadrado, encaixe esse que se evidenciado e separado formará nosso triângulo. Veja a imagem abaixo:

Como se desenha o triangulo

Agora que entendemos como devemos pensar, vamos ao código HTML e ao CSS.

                    	
                    	.triangulo{border-color:transparent transparent transparent #000; border-width:30px; border-style:solid;}
                    

No HTML criamos uma div com a classe triangulo, que no css, recebe a propriedade border com espessura de 30px, estilo sólido, e agora o mais importante, a cor deve ser transparente de todos os lados, exceto o lado que formará nosso triângulo. Nesse exemplo utilizei o lado esquerdo, então apliquei o estilo border-color:transparent transparent transparent #000 (top right bottom left), para aplicar a cor preta somente a borda do lado esquerdo.

Para fazer o download do exemplo, clique aqui.

Espero que tenham gostado, até a próxima.

voltar