CSS-Dreieck-Generator

CSS-Dreieck-Generator: Code mit Border und clip-path | We.Inc

Wähle eine von acht Richtungen, stelle Breite, Höhe und Farbe ein und kopiere ein CSS-Dreieck aus Borders oder mit clip-path, dazu die Tailwind-Version und ein Beispiel für einen Tooltip-Pfeil.

CSS-Dreieck-Generator

Es gibt zwei saubere Wege, ein Dreieck in CSS zu zeichnen. Der klassische Trick gibt einer Box ohne Größe dicke Borders und macht alle bis auf einen transparent. Der moderne Weg gibt einer normalen Box eine Größe und einen Hintergrund und schneidet sie dann mit clip-path: polygon() über drei Punkte zu. Dieser Generator schreibt beide Varianten für acht Richtungen.

Border-Methode oder clip-path?

Anforderung
Border-Methode

Einfarbiger, gefüllter Pfeil
Funktioniert überall
Funktioniert in allen aktuellen Browsern

Füllung mit Verlauf oder Bild
Nein, Borders haben jeweils nur eine Farbe
Ja, es schneidet jeden Hintergrund zu

Nur Kontur
Zwei Dreiecke übereinanderlegen
Nicht direkt; clip-path schneidet auch Borders und Schatten ab

Größe über width und height
Nein, Größe ergibt sich aus den Border-Breiten
Ja

Tooltip-Pfeil auf ::before oder ::after
Die übliche Wahl
Ebenfalls gut

Pfeile an Tooltips, Sprechblasen, Dropdown-Pfeile und Ecken von Bändern sind fast immer kleine CSS-Dreiecke. Wähle eine Richtung, zieh die Größe zurecht, und die Vorschau zeigt beide Techniken nebeneinander, damit du siehst, dass sie übereinstimmen, bevor du die kopierst, die zu deiner Komponente passt.

Wähle eine Richtung: oben, unten, links, rechts oder eines der vier Eckdreiecke.
Stelle Breite, Höhe und Farbe ein. Der Button für gleichseitig setzt die Höhe auf die Breite mal 0.866.
Vergleiche die beiden Vorschauen und kopiere dann die Border-Version, die clip-path-Version oder die Tailwind-Klassen.

Bei der Border-Methode wird die Border-Breite der farbigen Seite zur Höhe des Dreiecks, und die beiden transparenten Seiten nehmen jeweils die Hälfte der Grundlinie ein.
Nutze clip-path, wenn das Dreieck einen Verlauf, ein Bild oder einen Farbwechsel beim Hover auf einer Box mit fester Größe braucht.
Positioniere Tooltip-Pfeile mit position: absolute auf einem Pseudo-Element, dann brauchst du kein zusätzliches Markup.
Mehr als drei Punkte nötig? Mit dem clip-path-Generator kannst du jede Ecke eines Polygons ziehen.

Häufige Fragen

Wie funktioniert der Border-Dreieck-Trick?

Wo zwei Borders aufeinandertreffen, zeichnet der Browser die Ecke diagonal. Mit width und height auf 0 besteht die Box nur noch aus vier Border-Keilen, die sich in der Mitte treffen. Färbe einen Keil und mach seine Nachbarn transparent, dann siehst du ein einzelnes Dreieck.

Wie erstelle ich ein gleichseitiges Dreieck?

Die Höhe eines gleichseitigen Dreiecks ist die Grundlinie mal die Wurzel aus 3 geteilt durch 2, also etwa 0.866. Bei einer Grundlinie von 100 Pixeln nimmst du eine Höhe von etwa 87 Pixeln.

Kann ein CSS-Dreieck einen Rahmen oder eine Kontur haben?

Nicht von allein. Ein gängiger Ansatz ist, zwei Dreiecke übereinanderzulegen: ein etwas größeres in der Konturfarbe dahinter und darüber die Füllfarbe, um die Konturstärke versetzt. Ein Inline-SVG mit stroke ist einfacher, wenn du eine scharfe Kontur brauchst.

Verändert clip-path die Layout-Box des Elements?

Nein. Das Element behält im Layout seine volle rechteckige Größe; clip-path ändert nur, was gezeichnet wird. Inhalt außerhalb des Polygons, einschließlich Box-Schatten und Borders, wird abgeschnitten.

Wie schreibe ich ein clip-path-Dreieck in Tailwind?

Nutze eine Arbitrary Property mit Unterstrichen statt Leerzeichen, etwa [clip-path:polygon(50%_0,100%_100%,0_100%)], zusammen mit Größen- und Farbklassen wie w-[40px] h-[30px] bg-[#4F98FB].

Die Methode danach wählen, wofür das Dreieck gedacht ist

Für einen winzigen Pfeil, der aus einem Tooltip oder Menü herausragt, ist die Border-Methode immer noch der kürzeste Code, und sie passt bequem auf ein Pseudo-Element. Sie hat eine Farbe, und ihre Größe ergibt sich aus den Border-Breiten, mehr braucht ein Pfeil nicht.
Für eine dekorative Form, eine Ecke im Hero-Bereich oder alles mit Verlauf ist clip-path leichter zu durchschauen: Du setzt width und height wie bei jeder Box und beschreibst die drei Ecken in Prozent.

Eckdreiecke

Eckdreiecke sind rechtwinklig und füllen eine Hälfte eines Rechtecks. Mit Borders färbst du eine Seite und machst eine angrenzende Seite transparent, die anderen beiden bleiben bei null. Sie eignen sich gut für umgeknickte Papierecken und Bandenden.

Tooltip-Pfeil mit einem Pseudo-Element

Sprechblase mit Pfeil nach unten

Das ::after-Element hat keine Größe. Sein oberer Border ist der Pfeil, und die seitlichen Borders sind transparent.

Dreieck mit Verlauf über clip-path

Ein Border-Dreieck kann keinen Verlauf haben. Eine zugeschnittene Box schon, weil clip-path jeden Hintergrund zuschneidet, den die Box zeichnet.

Dreieck-Generator

Wähle eine Richtung, stelle Größe und Farbe ein und vergleiche das Border-Dreieck mit dem clip-path-Dreieck, bevor du kopierst.

Oben

Unten

Links

Rechts

Oben links

Oben rechts

Unten links

Unten rechts

Richtung des Dreiecks

Breite: {n}px

Höhe: {n}px

Farbe

Gleichseitig machen

Border-Methode

clip-path-Methode

Tailwind (clip-path)

CSS kopieren

Klassen kopieren

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Kostenlose Tools

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap