CSS-driehoekgenerator

CSS-driehoekgenerator: code met border en clip-path | We.Inc

Kies een van acht richtingen, stel breedte, hoogte en kleur in en kopieer een CSS-driehoek gemaakt met borders of met clip-path, plus de Tailwind-versie en een voorbeeld van een tooltip-pijl.

CSS-driehoekgenerator

Er zijn twee nette manieren om in CSS een driehoek te tekenen. De klassieke truc geeft een box zonder afmetingen dikke borders en maakt ze allemaal transparant op één na. De moderne manier geeft een gewone box een afmeting en een achtergrond, en snijdt hem dan bij met clip-path: polygon() met drie punten. Deze generator schrijft beide voor acht richtingen.

Border-methode of clip-path?

Behoefte
Border-methode

Effen pijl in één kleur
Werkt overal
Werkt in alle huidige browsers

Vulling met verloop of afbeelding
Nee, borders hebben elk één kleur
Ja, het snijdt elke achtergrond bij

Alleen een omlijning
Twee driehoeken stapelen
Niet direct; clip-path snijdt ook borders en schaduwen weg

Afmeting via width en height
Nee, afmeting via borderbreedtes
Ja

Tooltip-pijl op ::before of ::after
De gebruikelijke keuze
Ook prima

Pijlen op tooltips, tekstballonnen, dropdown-carets en lintpunten zijn bijna altijd kleine CSS-driehoeken. Kies een richting, sleep de afmeting, en het voorbeeld toont beide technieken naast elkaar, zodat u ziet dat ze overeenkomen voordat u de versie kopieert die bij uw component past.

Kies een richting: omhoog, omlaag, links, rechts of een van de vier hoekdriehoeken.
Stel breedte, hoogte en kleur in. De knop voor gelijkzijdig zet de hoogte op de breedte maal 0.866.
Vergelijk de twee voorbeelden en kopieer dan de border-versie, de clip-path-versie of de Tailwind-classes.

Bij de border-methode wordt de borderbreedte van de gekleurde kant de hoogte van de driehoek, en nemen de twee transparante kanten elk de helft van de basis.
Gebruik clip-path als de driehoek een verloop, een afbeelding of een kleurwissel bij hover nodig heeft op een box met afmetingen.
Plaats tooltip-pijlen met position: absolute op een pseudo-element, zodat ze geen extra markup toevoegen.
Meer dan drie punten nodig? Met de clip-path-generator sleept u elke hoek van een polygoon.

Veelgestelde vragen

Hoe werkt de border-truc voor driehoeken?

Waar twee borders samenkomen, tekent de browser de hoek diagonaal. Met width en height op 0 bestaat de box alleen uit vier bordertaartpunten die in het midden samenkomen. Kleur één punt in, maak de buren transparant, en u ziet één driehoek.

Hoe maak ik een gelijkzijdige driehoek?

De hoogte van een gelijkzijdige driehoek is de basis maal de wortel van 3 gedeeld door 2, ongeveer 0.866. Gebruik voor een basis van 100 pixels een hoogte van ongeveer 87 pixels.

Kan een CSS-driehoek een rand of omlijning hebben?

Niet op zichzelf. Een gebruikelijke aanpak is twee driehoeken stapelen: een iets grotere in de randkleur erachter, en de vulkleur erbovenop, verschoven met de dikte van de rand. Een inline SVG met een stroke is eenvoudiger als u een scherpe omlijning nodig hebt.

Verandert clip-path de layout-box van het element?

Nee. Het element behoudt zijn volledige rechthoekige afmeting in de layout; clip-path verandert alleen wat er getekend wordt. Inhoud buiten de polygoon, inclusief box shadows en borders, wordt weggesneden.

Hoe schrijf ik een clip-path-driehoek in Tailwind?

Gebruik een arbitrary property met underscores in plaats van spaties, zoals [clip-path:polygon(50%_0,100%_100%,0_100%)], samen met classes voor afmeting en kleur zoals w-[40px] h-[30px] bg-[#4F98FB].

Kies de methode op basis van waar de driehoek voor dient

Voor een piepklein pijltje dat uit een tooltip of menu steekt, is de border-methode nog steeds de kortste code, en hij past makkelijk op een pseudo-element. Hij heeft één kleur en zijn afmeting komt van borderbreedtes, en meer heeft een pijl niet nodig.
Voor een decoratieve vorm, een hoek in een hero of iets met een verloop is clip-path makkelijker te doorgronden: u stelt width en height in zoals bij elke box en beschrijft de drie hoeken als percentages.

Hoekdriehoeken

Hoekdriehoeken zijn rechthoekig en vullen de helft van een rechthoek. Met borders kleurt u één kant in en maakt u één aangrenzende kant transparant, terwijl de andere twee op nul blijven. Ze zijn handig voor omgevouwen papierhoekjes en lintuiteinden.

Tooltip-pijl met een pseudo-element

Ballon met een pijl naar beneden

Het ::after-element heeft geen afmeting. De bovenste border is de pijl en de zijborders zijn transparant.

Driehoek met verloop via clip-path

Een border-driehoek kan geen verloop krijgen. Een bijgesneden box wel, omdat clip-path elke achtergrond wegsnijdt die de box tekent.

Driehoekbouwer

Kies een richting, stel de afmeting en kleur in en vergelijk de border-driehoek met de clip-path-driehoek voordat u kopieert.

Omhoog

Omlaag

Links

Rechts

Linksboven

Rechtsboven

Linksonder

Rechtsonder

Richting van de driehoek

Breedte: {n}px

Hoogte: {n}px

Kleur

Gelijkzijdig maken

Border-methode

clip-path-methode

Tailwind (clip-path)

CSS kopiëren

Classes kopiëren

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gratis tools

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap