CSS-driehoekgenerator

De CSS Driehoek Generator is een interactieve tool waarmee je pure CSS-driehoeken kunt maken zonder afbeeldingen of SVG te gebruiken. Het maakt gebruik van de CSS-border-truc om driehoeken in 8 richtingen (omhoog, omlaag, links, rechts en vier diagonale richtingen) te produceren met aanpasbare grootte en kleur. De gegenereerde CSS-code kan direct naar je project worden gekopieerd.

Selecteer een driehoekrichting uit de richtingsknoppen (omhoog, omlaag, links, rechts of diagonaal). Pas breedte en hoogte aan met de schuifregelaars om de afmetingen van de driehoek te bepalen. Kies een kleur met de kleurkiezer. De preview wordt in realtime bijgewerkt en de gegenereerde CSS-code verschijnt onderaan. Klik op de kopieerknop om de CSS naar het klembord te kopiëren.

CSS-driehoeken gebruiken een slimme techniek met randen. Wanneer een element breedte en hoogte nul heeft, komen de randen samen in het middelpunt. Door sommige randen transparant en andere gekleurd te maken, ontstaat het aanzien van een driehoek. Een naar boven wijzende driehoek gebruikt bijvoorbeeld transparante linker- en rechterranden met een gekleurde onderrand. De randbreedtes bepalen de grootte en verhoudingen van de driehoek.

De generator ondersteunt 8 richtingen: omhoog, omlaag, links, rechts, linksboven, rechtsboven, linksonder en rechtsonder. Diagonale driehoeken gebruiken slechts twee randen in plaats van drie, wat een rechthoekige driehoek vormt. De breedte bepaalt de basis van de driehoek en de hoogte bepaalt hoe hoog deze is. Voor een perfect gelijkbenige driehoek stel je breedte en hoogte in op dezelfde waarde.

CSS-driehoeken worden vaak gebruikt voor tooltip-pijlen, dropdown-menu-wijzers, spraakballonstaarten, breadcrumb-scheidingstekens en decoratieve elementen. Ze zijn lichtgewicht, vereisen geen extra HTTP-verzoeken en schalen perfect op elke resolutie. Combineer ze met CSS-transities en transformaties voor vloeiende animaties.