Softonic

CSS-triangelgenerator

Steg 1 / 2
Nästa

Den klassiska CSS-triangeln är ingen triangel alls, det är ett element med noll bredd och noll höjd med tre transparenta kanter och en färgad kant som råkar mötas i en punkt. Den här generatorn matar ut den deklarationen åt dig i fyra riktningar (upp, ner, vänster, höger), dimensionerad till det pixelvärde du väljer och fylld med den färg du väljer. Utmärkt för tooltip-pilar, pratbubblor och brödsmuleavgränsare.

Så bygger du en border-triangel

  1. 1

    Välj en riktning

    Upp, ner, vänster eller höger. Riktningen avgör vilken kant som får färgen och vilka tre som förblir transparenta.

  2. 2

    Ställ in storleken

    Storleksvärdet används för alla kantbredder. En 60px-triangel blir 120px bred (eller hög, beroende på riktning).

  3. 3

    Välj en fyllningsfärg

    Färginmatningen fungerar bara med hex-värden (t.ex. `#10b981`); rgb-, rgba- och namngivna färger stöds inte. Färgen tillämpas endast på kanten på motsatt sida.

  4. 4

    Kopiera CSS-regeln

    Utdatan är en komplett regeluppsättning `.triangle { ... }`: släpp in den i din stilmall och lägg till `<div class="triangle"></div>` där det behövs.

Varför border-tricket fungerar

När en box har width: 0 och height: 0 möts dess fyra kanter i en enda mittpunkt. Eftersom kanterna fogas samman i 45 graders vinkel är varje kant redan en triangel, tre av dem råkar bara vara osynliga. Gör en kant färgad så ser du den ena triangeln.

Riktningskarta

Riktning Synlig kant Transparenta kanter
Upp border-bottom border-left, border-right, border-top
Ner border-top border-left, border-right, border-bottom
Vänster border-right border-top, border-bottom, border-left
Höger border-left border-top, border-bottom, border-right

Dimensioneringsmatematik

Alla tre transparenta kanter delar storleksvärdet. Den synliga kanten använder samma storlek. Så en triangel med size: 60:

  • Bredd = 2 × 60 = 120px för upp/ner-trianglar
  • Höjd = 2 × 60 = 120px för vänster/höger-trianglar

Om du behöver en asymmetrisk triangel (smalare bas, högre spets), ge de transparenta kanterna en storlek och den synliga kanten en annan storlek, till exempel ger border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; en hög, smal upp-triangel.

När du ska ta till SVG istället

  • Du behöver flera punkter, inte tre, använd <polygon>.
  • Triangeln måste skala flytande med föräldern, använd en viewBox och preserveAspectRatio.
  • Du vill ha en gradientfyllning, en stroke eller en rundad spets, CSS-kanter kan inte göra något av det.

Vanliga frågor

Inte med kanter ensamt, kantbredder accepterar inte % eller vw på något väl understött sätt. Om du behöver flytande skalning, byt till en SVG-<polygon> eller använd clip-path: polygon(...) på ett normalt element.

Du kan inte runda hörnet där kanterna möts. Använd en SVG med en stroke:ad path och stroke-linejoin: round, eller clip-path: polygon(...) kombinerat med ett lätt filter: drop-shadow för att maskera kanten.

Ja, det är det vanligaste användningsfallet. Positionera triangeln absolut mot tooltip-kanten och matcha fyllningsfärgen mot tooltip-bakgrunden så att den läses som en enda bubbla.

Ja. Riktningen, storleken och färgen du väljer skickas till vår server med sidans begäran så att den kan bygga CSS:en. I steg-för-steg-flödet följer de också med i sidlänken. De sparas inte.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Oktal-till-decimal-omvandlare

Omvandla oktala tal (bas 8) till decimalvärden, med den fullständiga positionsformeln och en steg-för-steg-uppdelning.

Markdown-förhandsvisare

Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.

Verktyget finns på andra språk