Getting an "arrowed" bottom on a div

Question

I'm trying really hard to get a short arrow at the bottom of a div element like this:

I've tried using :after borders and things but the element is not a fixed with, so I'm having trouble as they all seem to use fixed pixel size borders which only work based on a set width box. Playing with it to get them to use % seems to not work at all.

Any ideas?

This is what I've tried at the moment: http://dabblet.com/gist/ac3fe9ec510a12cec286