CSS-trekantgenerator

Velg en retning, størrelse og farge for å bygge en trekant av vanlig CSS, og kopier deretter koden. Dette bruker det klassiske trikset med en div uten bredde og høyde og gjennomsiktige border-kanter — ingen bildefiler, ingen SVG, ingen clip-path — bare noen få border-deklarasjoner som enhver nettleser forstår.

Hva er dette verktøyet?

CSS har ingen egen trekantform, så trekanter bygges med et velkjent triks: ta et element med null bredde og null høyde, gi det en solid border på én side og gjennomsiktige border-kanter på de to tilstøtende sidene. Fordi tilstøtende border-kanter møtes i en 45-graders vinkel, spisser de gjennomsiktige border-kantene seg mot et punkt, slik at bare den fargede border-kanten er synlig som en trekant.

Dette verktøyet bygger den strukturen for deg: velg hvilken retning trekanten skal peke, hvor stor den skal være, og hvilken farge den skal ha, og se forhåndsvisningen oppdateres live mens du kopierer den nøyaktige CSS-en. Det er det samme grunnleggende trikset som brukes over hele nettet for CSS-only piler, tooltip-pekere og nedtrekkspiler.

Kilde: CSS Backgrounds and Borders Module Level 3, W3C — definerer hvordan tilstøtende border-kanter møtes i en vinkel, som er mekanismen denne trekantteknikken bygger på.

Hvorfor bruke det?

Live forhåndsvisning rendrer selve trekanten, slik at du kan bekrefte størrelse, retning og farge før du kopierer noe.
Dekker alle fire grunnleggende retninger — opp, ned, venstre, høyre — med én kontroll.
Ingen bildefiler eller SVG nødvendig — en trekant bygget på denne måten er bare noen få linjer med CSS.
Nyttig for tooltip-pekere, nedtrekks-/harmonikapiler, egendefinerte punktmarkører og enkle dekorative former.
Kjører helt i nettleseren din — ingenting du stiller inn lastes opp noe sted.
Gratis, ingen registrering, fungerer på mobil.

Slik bruker du det

Velg en retning — trekanten peker opp, ned, venstre eller høyre avhengig av hvilken side som får den solide border-kanten.
Sett størrelsen — dette styrer border-width-verdien på alle tre sidene og avgjør hvor stor trekanten fremstår.
Velg en farge for den synlige (solide) border-kanten, som blir trekantens fyllfarge.
Kopier den genererte CSS-en og bruk den på et element med width: 0 og height: 0 — en tom <div> eller et pseudo-element som ::before/::after fungerer begge godt.

Eksempel

Inndata

Retning: ned · Størrelse: 60px · Farge: #ea580c

Resultat

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

For en nedovervendt trekant går den solide fargen på border-top, mens venstre og høyre border-kanter forblir gjennomsiktige — motsatt side av retningen trekanten peker.

Hvorfor null bredde og høyde er avgjørende

Trikset fungerer bare fordi elementet ikke har noen egen innholdsboks — width: 0 og height: 0 betyr at hele den synlige formen kommer utelukkende fra border-kantene som møtes i midtpunktet. Hvis elementet har en bredde eller høyde, spisser ikke border-kantene lenger til et rent punkt, og formen brytes. Dette er også hvorfor teknikken fungerer like godt på en tom <div> eller på et ::before/::after-pseudo-element med content: "" — det trengs ikke noe faktisk innhold, bare border-boksen.

MDNs dokumentasjon om CSS-egenskapen border dekker hvordan border-width, border-style og border-color kombineres, inkludert hvordan border-kanter på tilstøtende sider møtes diagonalt (developer.mozilla.org/en-US/docs/Web/CSS/border) — det geometriske faktumet hele denne teknikken bygger på.

Vanlige bruksområder for CSS-trekanter

Tooltip- og snakkeboble-pekere: en liten trekant (6–10px) plassert på kanten av en avrundet boks, farget til å matche boksens bakgrunn.
Nedtrekks- og select-piler: en liten nedovervendt trekant ved siden av en knapp eller et select-element for å indikere at det åpner en meny.
Harmonika-/utvid-indikatorer: en høyrevendt trekant som roterer til å peke nedover når en seksjon utvides.
Egendefinerte listepunkter: en liten høyrevendt trekant i stedet for nettleserens standard punktmarkør, for en mer særpreget listestil.
Enkle banner-/ribbonhjørner: en trekant plassert i hjørnet av et kort for å simulere en brettet ribbon-effekt.

Kombiner med andre CSS-verktøy

Trekanter brukt som tooltip-pekere trenger som regel en matchende skygge for å passe visuelt sammen med boksen de er festet til — Box Shadow-generatoren produserer den skyggen. For UI-former som går utover trekanter (chevroner, stjerner, sekskanter), er clip-path generelt den bedre moderne tilnærmingen fremfor å stable enda flere border-triks.

→ Box Shadow-generator · Border Radius-generator

Ofte stilte spørsmål

Hvorfor havner fargen på motsatt border-kant fra retningen trekanten peker?

Se for deg elementet som en diamant laget av fire trekantede border-segmenter som møtes i midten. Hvis den solide fargen er på border-top, opptar den synlige formen den øvre halvdelen — men fordi elementet har null størrelse, peker den «øvre halvdelen»-trekanten faktisk nedover, mot der elementets ikke-eksisterende innholdsboks ville ha vært. Samme logikk gjelder for alle fire retningene.

Kan jeg lage en trekant som ikke er en perfekt likebeint form?

Ja — dette verktøyet genererer alltid en symmetrisk trekant for enkelhets skyld, men du kan redigere den kopierte CSS-en manuelt etterpå. Å gjøre de to gjennomsiktige border-bredden ulike skjevstiller trekanten til én side; å endre den solide border-kantens bredde uavhengig endrer høyden uten å påvirke bredden på basen.

Fungerer denne teknikken i alle nettlesere?

Ja — det border-baserte trekant-trikset er avhengig av bare grunnleggende støtte for border-width, border-style og border-color, noe som har eksistert siden de tidligste CSS-implementasjonene. Det er en av de mest bredt kompatible rene CSS-formteknikkene som finnes.

Når bør jeg bruke clip-path i stedet for border-trikset?

Border-trikset er ideelt for enkle trekanter spesifikt, siden det ikke trenger ekstra egenskaper og fungerer overalt. For alt mer komplekst — femkanter, stjerner, piler med et hakk, eller diagonale kutt på en boks som fortsatt trenger å vise et bakgrunnsbilde — er clip-path mer fleksibelt og lettere å resonnere rundt, selv om det har smalere støtte i eldre nettlesere.

Kan jeg legge tekst eller et ikon inni trekanten?

Ikke direkte — siden trekantens element har null bredde og høyde, finnes det ingen innholdsboks å legge noe i. For å kombinere en trekant med tekst eller et ikon, bruk den som et dekorativt pseudo-element (::before/::after) på et overordnet element som posisjonerer den absolutt, og style deretter det overordnede elementets faktiske innhold separat.