Gerador de Triângulos CSS Gere triângulos CSS usando a técnica de borda com controles de direção e cor.

A técnica do triângulo CSS explora como as bordas se encontram nos cantos dos elementos. Quando um elemento tem largura e altura zero, as bordas formam formas triangulares onde elas se encontram. Ao tornar três bordas transparentes e uma borda colorida, é criado um triângulo apontando na direção oposta à da borda colorida. Por exemplo, border-bottom: 50px solid azul com bordas esquerda e direita transparentes cria um triângulo que aponta para cima. O tamanho do triângulo é controlado pelos valores de largura da borda. Para triângulos equiláteros, todas as larguras das bordas devem ser iguais. Para triângulos isósceles, a borda colorida pode ter uma largura diferente. Essa técnica também pode criar triângulos retos tornando apenas uma borda adjacente transparente. Os triângulos em CSS são renderizados de forma nítida em qualquer resolução e são suportados em todos os navegadores.