Шестигранник с закругленными углами - максимально просто

Добрый вечер.
Какой лучший способ для создания изображения шестигранника с тенью?
https://codepen.io/Zentro/project/editor/AaoveW/
- версия с svg-фильтром
Я пробовал вставить картинку - тогда нельзя применить тень. Сделал с помощью css/html(трансформированные дивы - 3 шт) - нельзя закруглить углы. Сделал с помощью svg-фильтров, но и тут беда - в хроме иногда пропадают картинки.
Подскажите как это сделать правильно и максимально просто?

Ответ

SVG решение

Шестиугольник выступает в роли маски. Маска задана в секции Далее она накладывается на изображение, что остается за границами маски обрезается. Ширина границы маски-шестиугольника задается атрибутом - stroke-width:3; Решение универсально - вы можете заменять в строке
Шестигранник с закругленными уголками
Изменён только патч.