Кнопка CSS-пути со ступенчатой ​​формой: как сместить тень только в правом нижнем углу (не на всю ширину)? ⇐ Html

[Anonymous]

Я создаю собственную «ступенчатую» форму кнопки с помощью clip-path: Polygon(), которая работает с элементами , и .
image: то, что я хочу
Сама форма работает нормально: у нее есть выемка в левом верхнем углу и выступающий квадрат в правом нижнем углу.
Вот минимальное воспроизведение в CodePen:
https://codepen.io/pen?template=wBWgePB
Проблема
Я использую фильтр: drop-shadow(), чтобы создать цветную смещенную «тень» (желтый цвет в демо для ясности). Я не уверен, что это правильное решение.
Однако:
drop-shadow() всегда следует за весь нижний край обрезанной фигуры
Мне нужен только небольшой блок смещения в правом нижнем углу, визуально «прикрепленный» к ступенчатому углу
Добавление большего пространства отсечения или расширение многоугольника приводит только к появлению тени поперек полная ширина
Я не могу выборочно сдвинуть вниз только часть тени
Коротко: тень не может быть смещена локально, это всегда контурная тень.
Ограничения
Нет элементов-оболочек (это должно быть удобно для CMS/редактора)
Должно работать для , и в идеале
Цвет фона неизвестен (невозможно «подделать» вырезы, сопоставив цвет фона)
Только для современных браузеров (Chrome, Edge, Safari, Firefox)
Чего я пытаюсь достичь
Визуально:
См. изображение выше.
Ступенчатый квадрат в левом верхнем углу
Визуально тот же квадрат «повторно прикреплен» в правом нижнем углу
Небольшой смещенный цветной блок только под правым нижним углом
Нет тени на всю ширину под кнопкой
Нет фиксированной ширины. Должен быть возможен мелкий и длинный текст.
Вопрос
Возможно ли технически в чистом CSS:
Сместить только часть drop-shadow()
Или иным образом создать локализованную смещенную тень для обрезанной фигуры
Без оболочек и без знания цвета фона?
Если нет, то какова самая чистая и технически правильная альтернатива с учетом этих ограничений?

Подробнее здесь: https://stackoverflow.com/questions/798 ... y-at-botto