Softonic

CSS-driehoeksgenerator

Stap 1 / 2
Volgende

De klassieke CSS-driehoek is helemaal geen driehoek: het is een element zonder breedte en hoogte, met drie transparante randen en één gekleurde rand die precies in één punt samenkomen. Deze generator geeft die declaratie voor u uit in vier richtingen (boven, onder, links en rechts), met de door u gekozen afmeting in pixels en gevuld met de gewenste kleur. Uitstekend geschikt voor tooltip-pijltjes, tekstballonnen en scheidingstekens in breadcrumbs.

Hoe je een driehoek met randen bouwt

  1. 1

    Kies een richting

    Omhoog, omlaag, links of rechts: de richting bepaalt welke rand de kleur krijgt en welke drie randen transparant blijven.

  2. 2

    Stel de grootte in

    De groottewaarde wordt gebruikt voor alle randbreedtes. Een driehoek van 60 px heeft een breedte van 120 px (of een hoogte van 120 px, afhankelijk van de richting).

  3. 3

    Kies een vulkleur

    De kleurinvoer werkt alleen met hex-waarden (bijvoorbeeld `#10b981`); rgb-, rgba- en benoemde kleuren worden niet ondersteund. De kleur wordt alleen toegepast op de rand aan de tegenoverliggende kant.

  4. 4

    Kopieer de CSS-regel

    Het resultaat is een volledige regelset `.triangle { ... }`; plaats deze in uw stylesheet en voeg `<div class="triangle"></div>` toe waar nodig.

Waarom de border-truc werkt

Als een box width: 0 en height: 0 heeft, komen zijn vier randen samen in één centraal punt. Omdat de randen onder een hoek van 45 graden op elkaar aansluiten, is elke rand al een driehoek; drie ervan zijn alleen onzichtbaar. Geef één rand een kleur en je ziet die ene driehoek.

Richtingsoverzicht

Richting Zichtbare rand Transparante randen
Boven border-bottom border-left, border-right, border-top
Onder border-top border-left, border-right, border-bottom
Links border-right border-top, border-bottom, border-left
Rechts border-left border-top, border-bottom, border-right

Grootte berekenen

Alle drie de transparante randen delen dezelfde groottewaarde. De zichtbare rand gebruikt dezelfde grootte. Dus een driehoek met size: 60:

  • Breedte = 2 × 60 = 120 px voor driehoeken naar boven/onder
  • Hoogte = 2 × 60 = 120 px voor driehoeken naar links/rechts

Als u een asymmetrische driehoek nodig hebt (smallere basis, hogere punt), geef de transparante randen één grootte en de zichtbare rand een andere; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; geeft bijvoorbeeld een hoge, smalle driehoek naar boven.

Wanneer u in plaats daarvan SVG moet gebruiken

  • U hebt meerdere punten nodig, geen drie, gebruik <polygon>.
  • De driehoek moet vloeiend meeschalen met het bovenliggende element, gebruik een viewBox en preserveAspectRatio.
  • U wilt een verloopvulling, een lijn of een afgeronde punt, CSS-randen kunnen dat geen van alle.

Veelgestelde vragen

Niet met randen alleen: randbreedtes accepteren % of vw op geen enkele goed ondersteunde manier. Als u vloeiende schaling nodig hebt, stap over op een SVG <polygon> of gebruik clip-path: polygon(...) op een gewoon element.

U kunt de hoek waar de randen samenkomen niet afronden. Gebruik een SVG met een omlijnd path en stroke-linejoin: round, of clip-path: polygon(...) in combinatie met een lichte filter: drop-shadow om de rand te maskeren.

Ja, dat is het meest voorkomende gebruiksscenario. Plaats de driehoek absoluut tegen de rand van de tooltip en stem de vulkleur af op de tooltip-achtergrond, zodat het als één ballon overkomt.

Ja. De door u gekozen richting, grootte en kleur worden met de pagina-aanvraag naar onze server gestuurd, zodat deze de CSS kan opbouwen. In de stapsgewijze flow reizen ze ook mee in de paginalink. Ze worden niet opgeslagen.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

Tool beschikbaar in andere talen