CSS clip-path button with stepped shape: how to offset drop-shadow only at bottom-right (not full width)? [closed]

I’m building a custom “stepped” button shape using clip-path: polygon() that works on <a>, <button> and <input> elements.

What I want:

The shape itself works fine: it has a notch at the top-left and a protruding square at the bottom-right.

Here is a minimal reproduction in CodePen: 👉 https://codepen.io/pen?template=wBWgePB

The problem

I’m using filter: drop-shadow() to create a colored offset “shadow” (yellow in the demo for clarity). I'm not sure if that is the correct solution.

However:

drop-shadow() always follows the entire bottom edge of the clipped shape

I only want a small offset block at the bottom-right, visually “attached” to the stepped corner

Adding more clip space or extending the polygon only makes the shadow appear across the full width

I cannot selectively push only part of the drop-shadow down

In short: the shadow cannot be locally offset, it’s always an outline shadow.

Constraints

No wrapper elements (this must be CMS/editor-friendly) Needs to work for <a>, <button> and ideally <input type="submit">. Background color is unknown (cannot “fake” cutouts by matching background color) Modern browsers only (Chrome, Edge, Safari, Firefox)

What I’m trying to achieve

Visually:

See image above. The stepped square at the top-left The same square visually “re-attached” at the bottom-right A small offset colored block under that bottom-right corner only No full-width shadow under the button No fixed width. Small text and longer text must be possible.

Question

Is it technically possible in pure CSS to: Offset only part of a drop-shadow() Or otherwise create a localized offset shadow for a clipped shape Without wrappers and without knowing the background color? If not, what is the cleanest, technically correct alternative given these constraints?