CSS Triangle-generator

Välj riktning, storlek och färg för att bygga en triangel av vanlig CSS, och kopiera sedan koden. Detta använder det klassiska tricket med en div utan bredd/höjd med transparenta border — inga bildfiler, ingen SVG, ingen clip-path — bara några border-deklarationer som alla webbläsare förstår.

Vad är detta verktyg?

CSS har ingen dedikerad triangelform, så trianglar byggs med ett välkänt kringgående: ta ett element med noll bredd och noll höjd, ge det en solid border på ena sidan och transparenta border på de andra två angränsande sidorna. Eftersom angränsande border möts i en 45-graders vinkel, tonar de transparenta border ut till en spets, vilket lämnar bara den färgade bordern synlig som en triangel.

Det här verktyget bygger den strukturen åt dig: välj vilken riktning triangeln ska peka, hur stor den ska vara och vilken färg den ska ha, se sedan den levande förhandsvisningen uppdateras och kopiera exakt CSS. Samma underliggande knep används över hela webben för rena CSS-pilar, tooltip-pekare och rullgardinspilar.

Källa: CSS Backgrounds and Borders Module Level 3, W3C — definierar hur angränsande borderkanter möts i en vinkel, vilket är mekanismen denna triangelteknik bygger på.

Varför använda det?

Levande förhandsvisning renderar den faktiska triangeln så att du kan bekräfta storlek, riktning och färg innan du kopierar något.
Täcker alla fyra grundriktningar — upp, ner, vänster, höger — med en kontroll.
Inga bildfiler eller SVG behövs — en triangel byggd så här är bara ett par rader CSS.
Användbart för tooltip-pekare, rullgardins-/dragspelspilar, egna punktlistemarkörer och enkla dekorativa former.
Körs helt i din webbläsare — inget du konfigurerar laddas upp någonstans.
Gratis, ingen registrering, fungerar på mobil.

Så använder du det

Välj en riktning — triangeln pekar upp, ner, vänster eller höger beroende på vilken sida som får den solida bordern.
Ställ in storleken — detta styr border-width-värdet på alla tre sidorna och avgör hur stor triangeln blir.
Välj en färg för den synliga (solida) bordern, som blir triangelns fyllnadsfärg.
Kopiera den genererade CSS:en och applicera den på ett element med width: 0 och height: 0 — en tom <div> eller ett pseudo-element som ::before/::after fungerar båda bra.

Exempel

Inmatning

Riktning: ner · Storlek: 60px · Färg: #ea580c

Resultat

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

För en nedåtpekande triangel går färgen på border-top medan vänster och höger border förblir transparenta — motsatt sida från den riktning triangeln pekar.

Varför noll bredd och höjd spelar roll

Tricket fungerar bara eftersom elementet inte har någon egen innehållsbox — width: 0 och height: 0 betyder att hela den synliga formen kommer rent från att border möts i mittpunkten. Om elementet har någon bredd eller höjd tonar border inte längre ut till en ren spets och formen bryts. Det är också därför tekniken fungerar lika bra på en tom <div> eller på ett ::before/::after-pseudo-element med content: "" — inget faktiskt innehåll behövs, bara border-boxen.

MDN:s dokumentation om CSS border-egenskapen täcker hur border-width, border-style och border-color kombineras, inklusive hur border på angränsande sidor möts diagonalt (developer.mozilla.org/en-US/docs/Web/CSS/border) — det geometriska faktum som hela denna teknik bygger på.

Vanliga användningar för CSS-trianglar

Tooltip- och pratbubblepekare: en liten triangel (6–10px) placerad vid kanten av en rundad box, färgad för att matcha boxens bakgrund.
Rullgardins- och select-pilar: en liten nedåtpekande triangel bredvid en knapp eller ett select-element för att visa att den öppnar en meny.
Dragspels-/expanderingsindikatorer: en högerpekande triangel som roterar för att peka nedåt när ett avsnitt expanderas.
Egna listmarkörer: en liten högerpekande triangel istället för webbläsarens standardpunkt, för en mer distinkt liststil.
Enkla banner-/bandhörn: en triangel instoppad i hörnet av ett kort för att simulera en vikt bandeffekt.

Kombinera med andra CSS-verktyg

Trianglar som används som tooltip-pekare behöver oftast en matchande skugga för att sitta visuellt med boxen de är fästa vid — Box Shadow-generatorn producerar den skuggan. För UI-former som går utöver trianglar (chevroner, stjärnor, hexagoner) är clip-path generellt det bättre moderna angreppssättet istället för att stapla fler border-knep.

→ Box Shadow-generator · Border Radius-generator

Vanliga frågor

Varför går färgen på den motsatta bordern från riktningen triangeln pekar?

Föreställ dig elementet som en diamant gjord av fyra triangulära bordersegment som möts i mitten. Om den solida färgen är på den övre bordern upptar den synliga formen den övre halvan — men eftersom elementet har noll storlek pekar den "övre halvan"-triangeln faktiskt nedåt, mot där elementets icke-existerande innehållsbox skulle ha varit. Samma logik gäller alla fyra riktningarna.

Kan jag göra en triangel som inte är en perfekt likbent form?

Ja — det här verktyget genererar alltid en symmetrisk triangel för enkelhetens skull, men du kan handredigera den kopierade CSS:en efteråt. Att göra de två transparenta borderbredderna olika skevar triangeln åt ena sidan; att ändra den solida bordens bredd oberoende ändrar dess höjd utan att påverka basbredden.

Fungerar denna teknik i alla webbläsare?

Ja — den borderbaserade triangeltricket förlitar sig bara på grundläggande stöd för border-width, border-style och border-color, som har funnits sedan de tidigaste CSS-implementationerna. Det är en av de mest kompatibla rena CSS-formteknikerna som finns.

När ska jag använda clip-path istället för border-tricket?

Border-tricket är idealiskt specifikt för enkla trianglar, eftersom det inte behöver några extra egenskaper och fungerar överallt. För allt mer komplext — femhörningar, stjärnor, pilar med ett hack, eller diagonala snitt på en box som fortfarande behöver visa en bakgrundsbild — är clip-path mer flexibelt och lättare att resonera kring, även om det har smalare stöd i äldre webbläsare.

Kan jag lägga text eller en ikon inuti triangeln?

Inte direkt — eftersom triangelns element har noll bredd och höjd finns det ingen innehållsbox att hålla något i. För att kombinera en triangel med text eller en ikon, använd den som ett dekorativt pseudo-element (::before/::after) på ett förälderelement som positionerar den absolut, och styla sedan förälderns faktiska innehåll separat.