Spójność elementów z nałożonym efektem box-shadow

Question

Cześć, od jakiegoś czasu zastanawiam się jak stworzyć element o nieregularnym kształcie z ładnym box-shadow. Tutaj przykład:

Pierwsze co przychodzi mi do głowy to stworzenie elementu i pseudoelementu oraz wypozycjonowanie ich absolutnie względem siebie tak, aby były połączone. Dopóki nie używam box-shadow jest w porządku, ale z - już niezupełnie. Tutaj kod z moim konceptem na wykonanie powyższego dzieła:

https://jsbin.com/ligarozopu/edit?html,css,output

Jak widać elementy nie są do końca spójne i nie wiem jak temu zaradzić. Zna ktoś jakiś sposób na stworzenie czegoś takiego? Z góry dzięki za odpowiedzi, pozdrówka 

Answer 1

https://jsfiddle.net/tdkk5ur2/

Generalnie kilka zmian:

- usunięcie wysokości z .info-card - niech sama się dopasowuje do treści

- dodanie div.title i tam wpisywanie treści nagłówka

- pseudoselektor ::after przysłania box-shadow od dołu