CSS-Clip-Pfad-Schaltfläche mit abgestufter Form: Wie kann der Schlagschatten nur unten rechts (nicht in voller Breite) a ⇐ CSS

[Anonymous]

Ich erstelle eine benutzerdefinierte „abgestufte“ Schaltflächenform mit clip-path: polygon(), die auf -, - und -Elementen funktioniert.
Was ich will:


Die Form selbst funktioniert gut: sie hat oben links eine Kerbe und unten rechts ein hervorstehendes Quadrat.
Hier ist eine minimale Reproduktion in CodePen:
https://codepen.io/pen?template=wBWgePB
Das Problem
Ich verwende Filter: drop-shadow(), um einen farbigen Offset-„Schatten“ zu erstellen. (Gelb in der Demo zur Verdeutlichung). Ich bin mir nicht sicher, ob das die richtige Lösung ist.
Allerdings:

Code: Select all

drop-shadow()

folgt immer der gesamten Unterkante der ausgeschnittenen Form
Ich möchte nur einen kleinen versetzten Block unten rechts, der optisch an der abgestuften Ecke „angehängt“ wird
Durch das Hinzufügen von mehr Clip-Platz oder die Erweiterung des Polygons erscheint der Schatten nur über die gesamte Breite
Ich kann nicht selektiv nur einen Teil des Schlagschattens nach unten verschieben
Kurz gesagt: Der Schatten kann nicht lokal versetzt werden, es ist immer ein Umrissschatten.
Einschränkungen
Keine Wrapper-Elemente (dies muss CMS-/editorfreundlich sein)
Muss für , und idealerweise funktionieren.
Hintergrundfarbe ist unbekannt (kann nicht „gefälscht“ werden) Ausschnitte durch Anpassen der Hintergrundfarbe)
Nur moderne Browser (Chrome, Edge, Safari, Firefox)
Was ich erreichen möchte
Optisch:
Siehe Bild oben.
Das abgestufte Quadrat oben links
Das gleiche Quadrat wird unten rechts optisch „wieder angefügt“
Ein kleiner versetzter farbiger Block darunter Nur die untere rechte Ecke
Kein Schatten in voller Breite unter der Schaltfläche
Keine feste Breite. Kleiner Text und längerer Text müssen möglich sein.
Frage
Ist es in reinem CSS technisch möglich:
Nur einen Teil eines Schlagschattens zu versetzen()
Oder auf andere Weise einen lokalisierten versetzten Schatten für eine abgeschnittene Form zu erstellen
Ohne Wrapper und ohne Kenntnis der Hintergrundfarbe?
Wenn nicht, was ist angesichts dieser Einschränkungen die sauberste und technisch korrekteste Alternative?