Как сверстать подобный блок с hover?

Question

[Никита]

Здравствуйте, есть в дизайне такой элемент https://i.imgur.com/fdmX0UW.png

Как его сверстать? Имеется вот такая верстка.
https://jsfiddle.net/cg3mk5x7/

Comments

[Никита]

Проблема в другом. Границы между блоков не смешиваются(

https://i.imgur.com/VbZRr6G.png

[Никита]

VicTHOR, Я разные способы уже испробовал..)

[STINGRAY_DEVELOP]

Попробуй вырезать белую дугу, с помощью которой ты сможешь перекрыть границы и вставить ее псевдоэлементом. То есть она снизу должна появляться вместе с блоком и перекрывать его сверху.

[Михаил]

пару кругов и магия с z-index
реально

[Никита]

VicTHOR, понятно что криво и т.д)
Нужно чтоб было смешивание бордеров. Пробовал через псевдо элементы с z-index. Не добился нужного результата.
https://i.imgur.com/b3HGLrd.png

[Никита]

VicTHOR, Пробовал..)

Answer 1

[forspamonly2]

filter: drop-shadow

Comments

[Никита]

Ураа, верный ответ)
Спасибо большое))