Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de triângulos CSS

CSS Triangle Generator

Gere triângulos só de CSS a partir de bordas — direção, base, altura e preenchimento — sem imagem, sem SVG, com código pronto para copiar.

Caminho da tarefa / da entrada ao resultado

Escolha a direção

Roda localmente · Nada é enviado

Como Gerador de triângulos CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como criar um triângulo em CSS

  1. 01

    Escolha a direção

    Escolha Cima, Direita, Baixo ou Esquerda em Direção. A pré-visualização atualiza instantaneamente — a técnica colore uma borda e mantém as bordas vizinhas transparentes. O espaço de trabalho começa com um triângulo apontando para cima.

  2. 02

    Defina o tamanho

    Ajuste Largura da base e Altura do triângulo de 8 a 180 px, em passos de 1 px. Para Cima/Baixo, a largura é a base e a altura mede até a ponta. Para Esquerda/Direita, a altura é a base vertical e a largura é o alcance horizontal. O padrão ocupa 72 px na horizontal e 64 px na vertical.

  3. 03

    Escolha a cor de preenchimento

    Defina a Cor de preenchimento com qualquer valor hexadecimal de seis dígitos — o padrão é #0f4cff. A pré-visualização ao vivo e a declaração border-color gerada ficam sempre sincronizadas, então o que você vê é exatamente o que é copiado.

  4. 04

    Confira o status da pré-visualização

    A pré-visualização ao vivo se renderiza de novo a cada mudança, e o selo de status mostra CSS VÁLIDO quando todos os valores estão dentro do intervalo. Um valor fora do intervalo muda para VERIFIQUE OS VALORES e bloqueia copiar e baixar até o controle destacado ser corrigido.

  5. 05

    Experimente o exemplo predefinido

    Carregar exemplo cria um triângulo apontando para a direita, com alcance horizontal de 104 px, base vertical de 86 px e preenchimento #ffd11a. Redefinir restaura os valores padrão.

  6. 06

    Copie ou baixe o CSS

    Pressione Copiar CSS para copiar a regra .triangle para a área de transferência, ou Baixar .css para salvá-la como toolars-triangle.css. A regra define largura e altura como zero e declara as quatro bordas, pronta para colar em qualquer folha de estilos.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de triângulos CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de triângulos CSS realmente faz

Setas de dropdown, ponteiros de tooltip e separadores de breadcrumb precisam de um triângulo pequeno e nítido, e um arquivo de imagem é a ferramenta errada para isso: fica borrado em telas de alta densidade e adiciona uma requisição à página. Um triângulo construído com bordas CSS é independente de resolução e muda de cor com um único valor hexadecimal. O Gerador de triângulos CSS renderiza a forma localmente enquanto você ajusta direção, tamanho e preenchimento, então iterar leva segundos. Quando parecer certo, um clique coloca a regra .triangle pronta na sua área de transferência.

Perguntas frequentes

Como funciona um triângulo em CSS puro?
O elemento recebe largura e altura zero mais quatro bordas. Colorir uma borda enquanto as duas bordas adjacentes ficam transparentes deixa um triângulo limpo — a regra .triangle gerada mostra exatamente qual borda carrega a Cor de preenchimento para a direção que você escolheu, e a borda oposta à ponta colapsa para zero.
Que tamanhos posso gerar?
Largura da base e Altura do triângulo aceitam valores de 8 a 180 px em passos de 1 px. Um valor fora do intervalo muda o status da pré-visualização para VERIFIQUE OS VALORES e bloqueia copiar ou baixar até o controle destacado ser corrigido, então a regra exportada é sempre válida.
O triângulo é sempre simétrico?
Sim. Para Cima e Baixo, as duas bordas laterais transparentes recebem metade da largura da base cada, então o ápice fica centralizado sobre a base; para Esquerda e Direita, as bordas superior e inferior dividem a altura da mesma forma. Todo triângulo gerado é isósceles — formas inclinadas ou retangulares precisam de uma técnica diferente, como clip-path.
Como mudo a cor ou o tamanho do triângulo depois?
Edite a regra gerada diretamente: só uma borda carrega a cor de preenchimento, as duas bordas adjacentes são transparentes e a borda oposta à ponta é zero. Mudar o único valor hexadecimal muda a cor, e ajustar as larguras das bordas remodela — não é preciso gerador depois da primeira cópia.
A saída funciona em todo navegador?
Sim. Triângulos baseados em bordas são uma das técnicas mais antigas do CSS e não precisam de suporte a imagem, SVG ou clip-path, então a regra gerada renderiza da mesma forma em todo navegador moderno, em qualquer densidade de tela, sem uma única requisição de rede.
Algo é enviado ou armazenado?
Não. A pré-visualização é renderizada localmente a partir de valores de estilo validados e, como afirma o rodapé do espaço de trabalho, nenhum valor gerado entra em armazenamento, registros, análise ou rede.

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar