Как задать тень элементу со скошенными углами или неправильной формой с помощью webkit-clip-path и filter: drop-shadow

Задача — есть элементы с неправильной формой, пятиугольники, шестиугольники, скошенные углы, элементы построены с помощью свойства -webkit-clip-path, но box-shadow не работает как нужно, а filter: drop-shadow одновременно с -webkit-clip-path на одном элементе не срабатывает.

Решение простое — добавить правило filter: drop-shadow для родителя того элемента, которому нужно задать тень.

Например, HTML

<div class="block-wrap">
  <div class="block"></div>
</div>

Стили CSS

.block-wrap {
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
}
.block {
  -webkit-clip-path: polygon(64px 0, 100% 0%, 100% 100%, 0 100%, 0 64px);
  clip-path: polygon(64px 0, 100% 0%, 100% 100%, 0 100%, 0 64px);
}

Рабочий пример

See the Pen webkit-clip-path and filter: drop-shadow by Denis (@deniscreative) on CodePen.

Пример с несколькими фигурами

See the Pen webkit-clip-path and filter: drop-shadow — Example by Denis (@deniscreative) on CodePen.