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

[Anonymous]

Я создаю собственную «ступенчатую» форму кнопки, используя clip-path: Polygon(), которая работает с элементами , и .
Что я хочу:


Сама форма работает нормально: у него есть выемка вверху слева и выступающий квадрат внизу справа.
Вот минимальное воспроизведение в 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