Верстка сложных элементов

[Alexander_G]

Всем привет!

Есть задание, сверстать фигуру представленную ниже на картинке, так как предусмотрен hover эффект тени по всему контуру фигуры.

Возникла сложно с версткой элементов обрамленных красным квадратом... Так же стоит учесть что это часть пазла представленного из четырёх элементов, и на каждом должен быть hover эффект...

Как можно сверстать эти элементы? 

Заранее большое спасибо за помощь!

Edited October 4, 2017 by Alexander_G

[npofopr]

наверно, только svg.

[wwt]

1 час назад, npofopr сказал:

наверно, только svg.

ещё можно рисовать пазлы в canvas, но это будет посложнее

[Tilonorrinco]

Самое простое решение, которое приходит на ум: изображения которые накладываются на блок с box-shadow. При ховере иконка заменяется на другую. 

В случае с элементами, созданными через css (например, треугольниками), можно также использовать фильтр.

Edited October 4, 2017 by Tilonorrinco

[Alexander_G]

Большое всем спасибо! Будем пробовать