Add a triangle bend to a drop shadow to div

Question

So, I have this site I am redeveloping for a client and it was made like 10 years ago. Currently their entire footer banner is an image. I am trying to preserve the footer to look exactly like the image without having to rely on using an image for the entire content which seems redundant to me because this can be done with HTML and CSS. So I am trying style it exact but cant seem to figure this slight triangular bend effect. I want to add a drop shadow effect to the top border of my footer only with a slight triangle bend effect on top of the logo for the site like this:

I can add the drop shadow straight across no problem, but I am not sure how to add that slight triangle effect like in the image. I am using bootstrap for responsiveness, so have dug around their docs to see if they had any helper classes to help me achieve this. I am not the greatest css expert so i have no idea how to achieve this effect. Is there a way using purely css? javascript or jquery will work too if needed.

This is the basic layout(3 column) of my markup and styles:

<div class="row drop-shadow">
    <div class="col-lg-4">
     //content not added yet
    </div>
    <div class="col-lg-4">
     //content not added yet
    </div>
    <div class="col-lg-4">
     //content not added yet
    </div>

</div>


.drop-shadow{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)}

Answer 1

Just a quick possibility here, but this code creates a simple triangle. You could use it to position the triangle absolute to the element w/ the box-shadow. This is the fastest solution I could come up with.

I edited the answer since you've added the CSS & HTML.