For the past week or so, we’ve been trying to make this possible using pure CSS, and we’re now to the point where we have no clue what to do.
I know you could do this with an image, but I really don’t want to… I’ve looked for examples for reference, but have had no such luck. Most of the examples I have found have the the notch at the bottom and use a border.
You can use the pseudo selector `::after` to semantically create new elements. Because it’s technically separated from the original element it doesn’t inherit the parents size. This should give you what you’re looking for. < http://codepen.io/BaylorRae/pen/iwynH>
Here’s the bit of code used to make it work.
border: 1.25em solid #ddd;
/* position the arrow */