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

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

Post by Anonymous »

Ich erstelle mit clip-path: polygon() eine benutzerdefinierte „abgestufte“ Schaltflächenform, die auf -, - und -Elementen funktioniert.
Bild: was ich will
Die Form selbst funktioniert gut: Sie hat oben links eine Kerbe und unten rechts ein hervorstehendes Quadrat.
Hier ist ein Minimal 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:
drop-shadow() folgt immer der gesamten Unterkante der beschnittenen Form
Ich möchte nur einen kleinen versetzten Block unten rechts, der optisch an der abgestuften Ecke „angehängt“ wird
Wenn Sie mehr Clipfläche hinzufügen oder das Polygon erweitern, erscheint der Schatten nur über die gesamte Fläche 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 funktionieren und idealerweise
Hintergrundfarbe ist unbekannt (kann Ausschnitte nicht durch Anpassen der Hintergrundfarbe „fälschen“)
Nur moderne Browser (Chrome, Edge, Safari, Firefox)
Was ich erreichen möchte
Optisch:
Siehe Bild oben.
Das abgestufte Quadrat oben links
Das gleiche Quadrat ist optisch „wieder angefügt“. Unten rechts
Ein kleiner versetzter farbiger Block nur unter dieser unteren rechten 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?

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post