Beispiel: Ribbon 3

Überschrift

Das Pseudoelement ::before erzeugt ein 20px breites, aber 0px hohes Rechteck, dessen Form nur von den oberen, rechten und unteren Rändern erzeugt wird. Der linke Rand ist transparent und bildet deshalb das ausgeschnittene Dreieck.
Das 2. Pseudoelement ::after erzeugt das Dreieck mit dem dunkleren Schattenwurf.