Criando Triângulos com CSS

Introdução

Hoje estive procurando uma forma de montar triângulos para o HTML e descobri um artigo no the david walsh blog. Eu imaginava utilizar canvas do HTML 5 ou então o recurso do CSS 3 para realizar transformações geométricas em uma div, mas encontrei a técnica muito mais simples. Neste artigo vamos ver como ela funciona.

Como montar triângulos com CSS

A ideia central da técnica é usar bordas sólidas com inteligência. Antes de montar um triângulo, vamos ver uma div com tamanho pequeno mas com bordas grandes e coloridas para entender como elas são renderizadas:

.quadrado {
    border-top: 20px solid transparent;
    border-left: 20px solid #FFFF00;
    border-right: 20px solid #0000FF;
    border-bottom: 20px solid #FF0000;

    display: block;
    font-size: 10px;
    height: 10px;
    line-height: 10px;
    width: 10px;
}

Aplicando este estilo a um elemento, ele ficaria assim:

O que fizemos foi um quadrado de 10 por 10 pixels, sem cor nenhuma, com bordas de tamanho 20 pixels. Cada borda possui uma cor, mas a borda do topo foi declarada transparente.

Bem, com o exemplo mostrado, você consegue imaginar o que aconteceria se deixássemos mais duas bordas transparentes e também deixássemos o quadrado muito menor que 10 pixels? Isso mesmo! Resultaria em um triângulo.

A técnica, portanto, consiste em criar um elemento sem conteúdo, com tamanho zero (altura zero e largura zero), e com bordas em determinados lados do elemento, sendo uma colorida e as outras transparentes. Dependendo de quais bordas colorir ou deixar transparente, o triângulo vai "apontar" para algum sentido (cima, baixo, esquerda ou direita).

Agora vamos ver um exemplo de como montar um triângulo que aponta para cima:

.triangulo-cima {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #FF0000;

    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    width: 0;
}

Resultado:

Não vou colocar aqui exemplos de setas para esquerda, direita e para baixo. Imagino que, se você entendeu o funcionamento da técnica, irá conseguir montar triângulos para qualquer sentido, basta pensar um pouco.

Estes triângulos podem ser posicionados estrategicamente em alguma div HTML para parecer uma caixa de diálogo, por exemplo. Assim como as caixinhas de curtir do facebook, que mostram a quantidade de "curtidas". Veja um exemplo:

Rubens diz:

Eu sou um balão de diálogo

Para montar um exemplo como este acima, é preciso conhecer um pouco sobre algumas propriedades do CSS como z-index, position, display, left, top, margin, etc.

Com um pouco de criatividade, é possível criar setas sofisticadas, como esta:

Observações

Se usarmos os mesmos tamanhos para as bordas, elas vão gerar um triângulo retângulo isósceles (com um ângulo de 90 graus e dois lados de tamanhos iguais). Mas podemos também usar tamanhos diferentes, gerando triângulos com todos lados de tamanhos diferentes.

Utilizar um triângulo gerado apenas com CSS tem a vantagem em relação a uma imagem pois tem um custo muito menor para o navegador, que não precisa fazer uma requisição HTTP para obter o arquivo da imagem e depois renderizá-la. Por outro lado, os triângulos gerados com CSS possuem limitações estéticas. Portanto, cabe ao designer escolher a melhor opção para cada caso.