CSS Triangle Generator

Kies een richting, grootte en kleur om een driehoek te bouwen uit gewone CSS, en kopieer daarna de code. Dit gebruikt de klassieke techniek van een div zonder breedte of hoogte met transparante randen — geen afbeeldingsbestanden, geen SVG, geen clip-path — gewoon een handvol border-declaraties die elke browser begrijpt.

Wat is deze tool?

CSS heeft geen ingebouwde driehoeksvorm, dus driehoeken worden gebouwd met een bekende omweg: neem een element met nul breedte en nul hoogte, geef het een solide rand aan één kant en transparante randen aan de twee aangrenzende kanten. Omdat aangrenzende randen elkaar onder een hoek van 45 graden raken, lopen de transparante randen taps toe tot een punt, waardoor alleen de gekleurde rand zichtbaar blijft als een driehoek.

Deze tool bouwt die structuur voor je: kies in welke richting de driehoek moet wijzen, hoe groot hij moet zijn, en welke kleur hij moet hebben, en bekijk daarna hoe de live preview zich bijwerkt en kopieer de exacte CSS. Dezelfde onderliggende truc wordt overal op het web gebruikt voor pure CSS-pijlen, tooltip-pijlpunten en dropdown-carets.

Bron: CSS Backgrounds and Borders Module Level 3, W3C — beschrijft hoe aangrenzende randen elkaar onder een hoek raken, het mechanisme waar deze driehoektechniek op steunt.

Waarom gebruiken?

Live preview rendert de echte driehoek zodat je grootte, richting en kleur kunt controleren voordat je iets kopieert.
Dekt alle vier de basisrichtingen — omhoog, omlaag, links, rechts — met één regelaar.
Geen afbeeldingsbestanden of SVG nodig — een driehoek gebouwd op deze manier is slechts een paar regels CSS.
Handig voor tooltip-pijlpunten, dropdown-/accordeon-carets, aangepaste opsommingspunten en eenvoudige decoratieve vormen.
Draait volledig in je browser — niets van wat je configureert wordt ergens geüpload.
Gratis, geen aanmelding, werkt op mobiel.

Hoe te gebruiken

Kies een richting — de driehoek wijst omhoog, omlaag, links of rechts, afhankelijk van welke kant de solide rand krijgt.
Stel de grootte in — dit bepaalt de border-width-waarde aan alle drie de kanten en bepaalt hoe groot de driehoek eruitziet.
Kies een kleur voor de zichtbare (solide) rand, die de vulkleur van de driehoek wordt.
Kopieer de gegenereerde CSS en pas deze toe op een element met width: 0 en height: 0 — een lege <div> of een pseudo-element zoals ::before/::after werken beide prima.

Voorbeeld

Invoer

Richting: omlaag · Grootte: 60px · Kleur: #ea580c

Uitvoer

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Voor een omlaagwijzende driehoek komt de solide kleur op border-top terwijl de linker- en rechterranden transparant blijven — de tegenovergestelde kant van de richting waar de driehoek naar wijst.

Waarom nul breedte en hoogte belangrijk zijn

De truc werkt alleen omdat het element geen eigen content-box heeft — width: 0 en height: 0 betekenen dat de hele zichtbare vorm puur voortkomt uit de randen die elkaar in het middelpunt raken. Als het element enige breedte of hoogte heeft, lopen de randen niet meer taps toe tot een nette punt en breekt de vorm. Dit is ook waarom de techniek even goed werkt op een lege <div> als op een ::before/::after-pseudo-element met content: "" — er is geen echte inhoud nodig, alleen de border-box.

De MDN-documentatie over de CSS border-eigenschap beschrijft hoe border-width, border-style en border-color samenwerken, inclusief hoe randen aan aangrenzende zijden elkaar diagonaal raken (developer.mozilla.org/en-US/docs/Web/CSS/border) — het geometrische feit waar deze hele techniek op is gebouwd.

Veelvoorkomende toepassingen van CSS-driehoeken

Tooltip- en spraakbel-pijlpunten: een kleine driehoek (6–10px) gepositioneerd aan de rand van een afgeronde box, gekleurd om te matchen met de achtergrond van de box.
Dropdown- en select-carets: een kleine omlaagwijzende driehoek naast een knop of select-element om aan te geven dat deze een menu opent.
Accordeon-/uitklap-indicatoren: een rechtwijzende driehoek die roteert om omlaag te wijzen wanneer een sectie is uitgeklapt.
Aangepaste lijstpunten: een kleine rechtwijzende driehoek in plaats van het standaard browsersymbool, voor een meer onderscheidende lijststijl.
Eenvoudige banner-/lintjeshoeken: een driehoek weggewerkt in de hoek van een kaart om een omgevouwen lint-effect te simuleren.

Combineren met andere CSS-tools

Driehoeken die als tooltip-pijlpunten worden gebruikt, hebben meestal een bijpassende slagschaduw nodig om visueel bij de box te horen waaraan ze vastzitten — de Box Shadow Generator produceert die schaduw. Voor UI-vormen die verder gaan dan driehoeken (chevrons, sterren, zeshoeken) is clip-path over het algemeen de betere moderne aanpak dan nog meer border-trucs stapelen.

→ Box Shadow Generator · Border Radius Generator

Veelgestelde vragen

Waarom staat de kleur op de tegenovergestelde rand van de richting waar de driehoek naar wijst?

Stel je het element voor als een ruit gemaakt van vier driehoekige randsegmenten die elkaar in het midden raken. Als de solide kleur op de bovenrand staat, neemt de zichtbare vorm de bovenste helft in beslag — maar omdat het element geen grootte heeft, wijst die 'bovenste helft'-driehoek in werkelijkheid naar beneden, richting waar de niet-bestaande content-box van het element zou hebben gezeten. Dezelfde logica geldt voor alle vier de richtingen.

Kan ik een driehoek maken die geen perfecte gelijkbenige vorm heeft?

Ja — deze tool genereert altijd een symmetrische driehoek voor de eenvoud, maar je kunt de gekopieerde CSS achteraf handmatig aanpassen. Als je de twee transparante border-breedtes ongelijk maakt, scheeftrek je de driehoek naar één kant; als je de breedte van de solide rand onafhankelijk verandert, wijzig je de hoogte zonder de basisbreedte te beïnvloeden.

Werkt deze techniek in alle browsers?

Ja — de op borders gebaseerde driehoektruc steunt alleen op basisondersteuning voor border-width, border-style en border-color, die al bestaat sinds de vroegste CSS-implementaties. Het is een van de best ondersteunde pure CSS-vormtechnieken die er zijn.

Wanneer moet ik clip-path gebruiken in plaats van de border-truc?

De border-truc is ideaal voor specifiek eenvoudige driehoeken, omdat hij geen extra eigenschappen nodig heeft en overal werkt. Voor alles complexers — vijfhoeken, sterren, pijlen met een inkeping, of diagonale sneden in een box die nog steeds een achtergrondafbeelding moet tonen — is clip-path flexibeler en makkelijker te doorgronden, al heeft het minder brede ondersteuning in oudere browsers.

Kan ik tekst of een icoon in de driehoek plaatsen?

Niet direct — omdat het element van de driehoek nul breedte en hoogte heeft, is er geen content-box om iets in te plaatsen. Om een driehoek met tekst of een icoon te combineren, gebruik je hem als decoratief pseudo-element (::before/::after) op een bovenliggend element dat hem absoluut positioneert, en style je de eigenlijke inhoud van het bovenliggende element apart.