ifBuyz Tools
Design

Gerador de triângulo CSS

Entrada

Escolha a direção, a base, a altura e a cor.

Direção
Base Width60px
Altura80px

Copie o CSS gerado e aplique-o a um elemento vazio.

Saída

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid #6366f1;
}

Perguntas frequentes

Como criar triângulo em CSS?
Usando bordas com uma face visível.
Posso mudar a direção?
Sim, ajustando o lado da borda colorida.
Por que usar gerador?
Evita tentativa e erro e entrega código pronto.