Gerador de triângulos e setas CSS
Escolha uma direcção, tamanho e cor, e esta ferramenta escreve a regra CSS que desenha um triângulo ou uma seta — sem necessidade de imagens.
Gerador de triângulos e setas CSS
Escolha uma direcção, uma largura, altura e cor, e esta ferramenta escreve a regra CSS que desenha a forma — um triângulo apontando para cima, baixo, esquerda ou direita, ou um triângulo de canto para uma etiqueta em estilo fita. Não há ficheiro de imagem para exportar e não há marcação extra para adicionar: a forma é puro CSS, portanto dimensiona-se perfeitamente em qualquer tamanho e permanece nítida em ecrãs de alta densidade. É o componente fundamental por trás de caretas de menus suspensos, indicadores de acordeão, etiquetas de fita e o pequeno apontador num tooltip ou bolha de chat.
Duas técnicas são suportadas. O border trick define um valor de zero para a largura e altura da caixa, torna as bordas opostas transparentes e colore o resto — a receita clássica, com o suporte mais amplo de navegadores. clip-path desenha a forma numa caixa dimensionada usando um polígono, o que é mais fácil de ler nas ferramentas de desenvolvimento e de animar. Mude entre elas com a opção de técnica.
Ligue "Usar como pseudo-elemento ::after" para obter uma regra focada em ::after, posicionada absolutamente, pronta para colocar num elemento que já tenha posicionamento relativo — exatamente o que uma seta de menu suspenso ou um apontador de tooltip precisa, sem HTML extra. Ligue "Bolha de fala com seta anexada" e a ferramenta gera duas regras em conjunto: uma caixa de chamada com borda e arredondada, e uma cauda de seta anexada à sua borda, apontando na direcção que escolheu — a forma por trás de uma bolha de chat ou um popover de texto de ajuda.
Tudo é executado no seu navegador: nada do que configura é enviado para qualquer lado. Copie o CSS gerado, transfira-o como ficheiro .txt ou envie-o para a entrada de outra ferramenta — os geradores de border-radius ou clip-path, por exemplo — para continuar a refinar a forma.