UTILS.
100% in de browser

CSS Triangle Generator

Genereer een pure-CSS driehoek in elke richting en kopieer de CSS.

Over deze tool

Maak een pure-CSS driehoek met de klassieke border-truc — kies een richting, grootte en kleur, en kopieer vervolgens de regel. Het voorbeeld wordt live bijgewerkt en alles draait in je browser.

Veelgestelde vragen

Hoe werkt de border-truc?
Een element met nul breedte en hoogte toont alleen zijn randen; door drie randen transparant te maken blijft er één gekleurde rand over in de vorm van een driehoek.
Waarom worden breedte en hoogte op 0 gezet?
Zonder vakoppervlak komen de randen samen in het midden, zodat de enige zichtbare rand een nette driehoek wordt in plaats van een dikke rand.

Meer tools