ifBuyz Tools
Ontwerp

CSS-driehoeks-generator

Invoer

Kies de richting, basisbreedte, hoogte en kleur.

Richting
Base Width60px
Hoogte80px

Kopieer de gegenereerde CSS en pas die toe op een leeg element.

Uitvoer

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

Veelgestelde vragen

Hoe maak je een CSS-driehoek?
Met border-techniek waarbij één zijde zichtbaar is.
Kun je de richting wijzigen?
Ja, door de zichtbare borderzijde aan te passen.
Waarom een generator gebruiken?
Voor snel correcte syntax zonder trial-and-error.