Gerador de triângulo CSS: código com border e clip-path | We.Inc
Escolha uma de oito direções, defina largura, altura e cor e copie um triângulo CSS feito com bordas ou com clip-path, além da versão em Tailwind e de um exemplo de seta de tooltip.
Gerador de triângulo CSS
Existem duas formas limpas de desenhar um triângulo em CSS. O truque clássico dá a uma caixa de tamanho zero bordas grossas e deixa todas, menos uma, transparentes. A forma moderna dá a uma caixa normal um tamanho e um fundo e depois a recorta com clip-path: polygon() usando três pontos. Este gerador escreve as duas para oito direções.
Método com border ou clip-path?
Necessidade
Método com border
Seta sólida de uma cor
Funciona em todo lugar
Funciona em todos os navegadores atuais
Preenchimento com gradiente ou imagem
Não, cada borda aceita uma só cor
Sim, recorta qualquer fundo
Só o contorno
Empilhe dois triângulos
Não diretamente; o clip-path também corta bordas e sombras
Tamanho definido por largura e altura
Não, o tamanho vem das larguras das bordas
Sim
Seta de tooltip em ::before ou ::after
A escolha mais comum
Também funciona
Setas de tooltips, balões de fala, indicadores de dropdown e pontas de faixas quase sempre são pequenos triângulos CSS. Escolha uma direção, arraste o tamanho, e a prévia mostra as duas técnicas lado a lado para você conferir que são iguais antes de copiar a que combina com o seu componente.
Escolha uma direção: para cima, para baixo, para a esquerda, para a direita ou um dos quatro triângulos de canto.
Defina largura, altura e cor. O botão de equilátero define a altura como a largura vezes 0.866.
Compare as duas prévias e copie a versão com border, a versão com clip-path ou as classes do Tailwind.
No método com border, a largura da borda do lado colorido vira a altura do triângulo, e os dois lados transparentes ficam cada um com metade da base.
Use clip-path quando o triângulo precisar de um gradiente, de uma imagem ou de uma troca de cor no hover em uma caixa com tamanho definido.
Para setas de tooltip, posicione o triângulo com position: absolute em um pseudo-elemento, assim ele não exige marcação extra.
Precisa de mais de três pontos? O gerador de clip-path permite arrastar cada canto de um polígono.
Perguntas frequentes
Como funciona o truque do triângulo com border?
Onde duas bordas se encontram, o navegador desenha o canto na diagonal. Com width e height em 0, a caixa vira apenas quatro cunhas de borda que se encontram no meio. Pinte uma cunha e deixe as vizinhas transparentes, e você vê um único triângulo.
Como faço um triângulo equilátero?
A altura de um triângulo equilátero é a base vezes a raiz quadrada de 3 dividida por 2, cerca de 0.866. Para uma base de 100 pixels, use uma altura de cerca de 87 pixels.
Um triângulo CSS pode ter borda ou contorno?
Não sozinho. Uma abordagem comum é empilhar dois triângulos: um um pouco maior na cor do contorno, atrás, e a cor de preenchimento por cima, deslocada pela espessura do contorno. Um SVG inline com stroke é mais simples quando você precisa de um contorno nítido.
O clip-path muda a caixa de layout do elemento?
Não. O elemento mantém o seu tamanho retangular completo no layout; o clip-path só muda o que é pintado. O conteúdo fora do polígono, incluindo sombras e bordas, é cortado.
Como escrevo um triângulo com clip-path no Tailwind?
Use uma propriedade arbitrária com underscores no lugar dos espaços, como [clip-path:polygon(50%_0,100%_100%,0_100%)], junto com classes de tamanho e cor como w-[40px] h-[30px] bg-[#4F98FB].
Escolha o método pela finalidade do triângulo
Para uma setinha que sai de um tooltip ou de um menu, o método com border continua sendo o código mais curto e cabe bem em um pseudo-elemento. Ele tem uma única cor e o tamanho vem das larguras das bordas, que é tudo de que uma seta precisa.
Para uma forma decorativa, um canto de hero ou qualquer coisa com gradiente, o clip-path é mais fácil de entender: você define largura e altura como em qualquer caixa e descreve os três cantos em porcentagens.
Triângulos de canto
Triângulos de canto são retângulos e preenchem metade de um retângulo. Com bordas, você pinta um lado e deixa um lado adjacente transparente, mantendo os outros dois em zero. São práticos para cantos de papel dobrado e pontas de faixas.
Seta de tooltip com um pseudo-elemento
Balão com seta para baixo
O elemento ::after não tem tamanho. A borda de cima dele é a seta e as bordas laterais são transparentes.
Triângulo com gradiente usando clip-path
Um triângulo de borda não aceita gradiente. Uma caixa recortada aceita, porque o clip-path corta qualquer fundo que a caixa pinte.
Construtor de triângulos
Escolha uma direção, defina o tamanho e a cor e compare o triângulo com border com o triângulo com clip-path antes de copiar.