Daily Toolkits

Gerador de triângulo CSS

Gere triângulos CSS com o clássico truque de borda. Defina a direção, o tamanho e a cor e copie o snippet.

CSS Triangle Generator

Live

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

  • Gere triângulos CSS com truques de borda – direção, tamanho e cor.
  • Executa no seu navegador
  • Grátis para usar

Como usar

  1. Escolha a direção do triângulo.
  2. Defina o tamanho e a cor de preenchimento.
  3. Copie o CSS.

How this tool works

  1. Escolha a direção do triângulo.
  2. Defina o tamanho e a cor de preenchimento.
  3. Copie o CSS.

Recommended settings

  • Use as opções padrão primeiro e depois ajuste se necessário

Supported formats

Text / on-page input

File size and limits

  • Visualizações multicamadas muito complexas podem parecer mais lentas em telefones mais antigos.

Privacy

Os geradores de cores e CSS são executados inteiramente no seu navegador. Pré-visualizações e conversões nunca carregam seus estilos.

Common use cases

  • Use CSS Triangle Generator sempre que precisar: Gere triângulos CSS com truques de borda – direção, tamanho e cor.

Troubleshooting

A visualização parece diferente depois de colar

Verifique se há CSS concorrentes em sua página (redefinições, cores herdadas). Copie primeiro a regra gerada em uma folha de estilo isolada.

Perguntas frequentes

Isso carrega meu CSS?

Não. Geradores e conversores são executados em seu navegador com visualização ao vivo.

Eu preciso de uma conta?

Não. Abra a ferramenta, ajuste os controles e copie o CSS.

Ferramentas relacionadas

CSS Clip Path Generator

Build polygon and shape clip-paths with an interactive preview.

Open tool

Border Radius Generator

Control each corner independently and preview rounded shapes with copy-ready CSS.

Open tool

Box Shadow Generator

Design layered box-shadows with offset, blur, spread, and color — live preview included.

Open tool