Ein Polygon erstellen

[Gunnar Bittersmann]

Hello out there!

Es war halt eine Idee die Links nicht einfach mit einem Streifen von oben nach unten zu hinterlegen. Ist das nicht zu realisieren?

Doch. Du erstellst den Pfeil als Grafik (GIF oder PNG, auf hinreichend große Höhe achten!)
Pfeilfarbe: transparent (oder Hintergrundarbe der Box),
Hintergrundfarbe: Hintergrundfarbe des umgebenden Bereichs (nicht transparent!)
Beispiel: http://gunnarbittersmann.de/selfhtml-forum/t151597/pfeil.html

Diesen nimmst du als Hintergrundbild für die Box, nicht wiederholt, vertikal mittig und horizontal rechts ausgerichtet. [CSS2 §14.2.1, http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=SELFHTML] Dann passt die Pfeilspitze für jede Boxhöhe, welche du wegen variablem Inhalt und unterschiedlichen Schriftgrößen bei Nutzern ja nicht kennen kannst.

Damit die Schrift nicht in den Pfeil hineinläuft, gibst du der Box rechts entsprechend großes Padding.
Beispiel: http://gunnarbittersmann.de/selfhtml-forum/t151597/pfeil.html
Stylesheet: http://gunnarbittersmann.de/selfhtml-forum/t151597/pfeil.css

Nun ist dadurch der Abstand vom Text zur Pfeilspitze bei geringer Höhe der Box unnötig groß. Möchtest du die Breite der Box mit Pfeilspitze je nach Boxhöhe gestalten, liest du die deren Höhe mit JavaScript aus und setzt in Abhängigkeit davon den Wert des Paddings.
Beispiel: http://gunnarbittersmann.de/selfhtml-forum/t151597/pfeil2.html
JavaScript: http://gunnarbittersmann.de/selfhtml-forum/t151597/pfeil.js

See ya up the road,
Gunnar