Pular para o conteúdo
Toolars
Explorar

Gerador de triângulos CSS

CSS Triangle Generator

Oito direções de triângulo, incluindo diagonais; ajuste medidas e exporte HTML e CSS correspondentes.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

Caminho da tarefa / da entrada ao resultado

Como criar um triângulo em CSS

  1. 01

    Escolha a direção

    Superior direito / Inferior direito / Inferior esquerdo / Superior esquerdo · 8

  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. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

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. Oito direções de triângulo, incluindo diagonais; ajuste medidas e exporte HTML e CSS correspondentes. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
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?
Oito direções de triângulo, incluindo diagonais; ajuste medidas e exporte HTML e CSS correspondentes. Superior direito / Inferior direito / Inferior esquerdo / Superior esquerdo · 8
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.

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

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

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar