CSS-Ribbon-Generator
Ribbons und Banderolen für Karten erzeugen: Eckband, Banner oder Lesezeichen mit Text und Farben – reines CSS.
Der CSS-Ribbon-Generator setzt Bänder auf Karten, etwa „Neu“, „Angebot“ oder „Beliebt“. Zur Wahl stehen ein diagonales Eckband, ein seitliches Banner mit Faltung und ein Lesezeichen. Text, Farben, Seite, Abstand, Schriftgröße und Schatten sind einstellbar; alles entsteht ohne Bilder nur mit CSS.
<article class="card">
<span class="ribbon">Neu</span>
<h3>Pro-Tarif</h3>
<p>Alles aus Basic plus Teamfunktionen und Support.</p>
</article>Drei Arten von Ribbons
| Art | Technik | Geeignet für |
|---|---|---|
| Eckband | transform: rotate(45deg), Karte mit overflow: hidden | Kurze Labels wie „Neu“ |
| Banner | Überstand plus Faltung aus ::after-Rahmen | Längere Texte, Preise |
| Lesezeichen | clip-path mit Kerbe | Favoriten, Auszeichnungen |
Die Faltung des Banners ist ein kleines Dreieck in einem dunkleren Ton der Bandfarbe. Wie solche Dreiecke entstehen, zeigt der CSS-Dreieck-Generator.
Häufige Fragen
Warum braucht die Karte position: relative?
Das Band ist absolut positioniert und richtet sich am nächsten positionierten Vorfahren aus. Ohne position: relative an der Karte würde es an der Seite oder einem anderen Container kleben.
Warum ist beim Eckband overflow: hidden nötig?
Das Eckband ist breiter als die sichtbare Ecke und wird um 45 Grad gedreht. overflow: hidden an der Karte schneidet die überstehenden Enden ab, sodass ein sauberes Band über der Ecke entsteht.
Wie lang darf der Text sein?
Beim Eckband passen je nach Abstand nur kurze Wörter wie „Neu“ oder „-20 %“. Für längere Texte nimm das Banner, es wächst mit dem Text mit.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.