CSS-trekantgenerator

Vælg en retning, størrelse og farve for at bygge en trekant af ren CSS, og kopiér derefter koden. Dette bruger det klassiske trick med en div med nul bredde/nul højde og gennemsigtige borders — ingen billedfiler, ingen SVG, ingen clip-path — bare en håndfuld border-erklæringer, som enhver browser forstår.

Hvad er dette værktøj?

CSS har ingen dedikeret trekantform, så trekanter bygges med en velkendt workaround: tag et element med nul bredde og nul højde, giv det en solid border på den ene side og gennemsigtige borders på de to tilstødende sider. Fordi tilstødende borders mødes i en 45-graders vinkel, tilspidses de gennemsigtige borders til en spids, så kun den farvede border er synlig som en trekant.

Dette værktøj bygger den struktur for dig: vælg hvilken retning trekanten skal pege, hvor stor den skal være, og hvilken farve den skal have, og se derefter den levende preview opdatere sig og kopiér den præcise CSS. Samme underliggende trick bruges på tværs af nettet til rene CSS-pile, tooltip-pile og dropdown-caretter.

Kilde: CSS Backgrounds and Borders Module Level 3, W3C — definerer hvordan tilstødende border-kanter mødes i en vinkel, hvilket er den mekanisme, denne trekantteknik bygger på.

Hvorfor bruge det?

Live preview renderer den faktiske trekant, så du kan bekræfte størrelse, retning og farve, før du kopierer noget.
Dækker alle fire grundretninger — op, ned, venstre, højre — med én kontrol.
Ingen billedfiler eller SVG nødvendig — en trekant bygget på denne måde er bare et par linjer CSS.
Nyttig til tooltip-pile, dropdown/accordion-caretter, brugerdefinerede punktopstillingsmarkører og simple dekorative former.
Kører helt i din browser — intet du konfigurerer bliver uploadet nogen steder.
Gratis, ingen tilmelding, virker på mobil.

Sådan bruger du det

Vælg en retning — trekanten peger op, ned, venstre eller højre afhængigt af hvilken side der får den solide border.
Sæt størrelsen — dette styrer border-width-værdien på alle tre sider og bestemmer hvor stor trekanten fremstår.
Vælg en farve til den synlige (solide) border, som bliver trekantens fyldfarve.
Kopiér den genererede CSS og anvend den på et element med width: 0 og height: 0 — en tom <div> eller et pseudo-element som ::before/::after fungerer begge fint.

Eksempel

Input

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

Output

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

For en nedadpegende trekant sidder den solide farve på border-top, mens venstre og højre borders forbliver gennemsigtige — den modsatte side af den retning, trekanten peger.

Hvorfor nul bredde og højde er afgørende

Trikket virker kun, fordi elementet ikke har sin egen indholdsboks — width: 0 og height: 0 betyder, at hele den synlige form udelukkende kommer fra borders, der mødes i midtpunktet. Hvis elementet har nogen bredde eller højde, tilspidses borders ikke længere til et rent punkt, og formen går i stykker. Det er også derfor teknikken virker lige så godt på en tom <div> eller på et ::before/::after-pseudo-element med content: "" — der kræves intet faktisk indhold, kun border-boksen.

MDN's dokumentation om CSS border-egenskaben dækker, hvordan border-width, border-style og border-color kombineres, herunder hvordan borders på tilstødende sider mødes diagonalt (developer.mozilla.org/en-US/docs/Web/CSS/border) — det geometriske faktum, hele denne teknik er bygget på.

Almindelige anvendelser af CSS-trekanter

Tooltip- og talebobbel-pile: en lille trekant (6–10px) placeret ved kanten af en afrundet boks, farvet så den matcher boksens baggrund.
Dropdown- og select-caretter: en lille nedadpegende trekant ved siden af en knap eller et select-element for at vise, at det åbner en menu.
Accordion/udvid-indikatorer: en højrepegende trekant, der roterer til at pege nedad, når en sektion udvides.
Brugerdefinerede listepunkter: en lille højrepegende trekant i stedet for browserens standard punktopstillingsmarkør, for en mere distinkt listestil.
Simple banner-/ribbon-hjørner: en trekant lagt ind i hjørnet af et kort for at simulere en foldet ribbon-effekt.

Kombinér med andre CSS-værktøjer

Trekanter brugt som tooltip-pile har som regel brug for en matchende drop-skygge, så de passer visuelt sammen med boksen, de er fæstet til — Box Shadow Generator producerer den skygge. Til UI-former ud over trekanter (chevroner, stjerner, hexagoner) er clip-path generelt den bedre moderne tilgang frem for at stable flere border-tricks.

→ Box Shadow-generator · Border Radius-generator

Ofte stillede spørgsmål

Hvorfor sidder farven på den modsatte border af den retning, trekanten peger?

Forestil dig elementet som en diamant lavet af fire trekantede border-segmenter, der mødes i midten. Hvis den solide farve er på top-borderen, optager den synlige form den øverste halvdel — men fordi elementet har nul størrelse, peger den 'øverste halvdel'-trekant faktisk nedad, mod hvor elementets ikke-eksisterende indholdsboks ville have været. Samme logik gælder for alle fire retninger.

Kan jeg lave en trekant, der ikke er en perfekt ligebenet form?

Ja — dette værktøj genererer altid en symmetrisk trekant for enkelheds skyld, men du kan redigere den kopierede CSS bagefter i hånden. At gøre de to gennemsigtige border-bredder ulige skæver trekanten til den ene side; at ændre den solide borders bredde uafhængigt ændrer dens højde uden at påvirke bunden bredde.

Virker denne teknik i alle browsere?

Ja — det border-baserede trekant-trick afhænger kun af grundlæggende understøttelse af border-width, border-style og border-color, som har eksisteret siden de tidligste CSS-implementeringer. Det er en af de bredest kompatible rene CSS-formteknikker, der findes.

Hvornår bør jeg bruge clip-path i stedet for border-tricket?

Border-tricket er ideelt til specifikt simple trekanter, da det ikke kræver ekstra egenskaber og virker overalt. Til alt mere komplekst — femkanter, stjerner, pile med et hak, eller diagonale afskæringer på en boks, der stadig skal vise et baggrundsbillede — er clip-path mere fleksibel og lettere at ræsonnere om, selvom den har smallere understøttelse i ældre browsere.

Kan jeg placere tekst eller et ikon inde i trekanten?

Ikke direkte — da trekantens element har nul bredde og højde, er der ingen indholdsboks til at rumme noget. For at kombinere en trekant med tekst eller et ikon skal du bruge den som et dekorativt pseudo-element (::before/::after) på et forælder-element, der placerer den absolut, og derefter style forælderens faktiske indhold separat.