Background color and background image below element - css

Question

The idea was to make the not valid error tip that comes up when people fail to fill out a required field show up like a speech bubble. So the arrowhead image shows in the center and underneath the text and would point into the field that they missed.
Fiddle here
HTML:
<span class="wpcf7-not-valid-tip">Please fill the required field.</span>
CSS:
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png');
}
As you can see I have a background color and the arrow image that needs to sit in the middle of the element and below it but, of course, if you position it using background-position, the image is hidden as it cannot overflow outside of the element itself. This would be easy if I could easily edit the HTML but I would prefer not to as I am using a plugin and want to be free to update the plugin in the future.
QUESTION:
Is there a pure CSS solution?
If not (and I suspect there isnt) what is the cleanest way to solve this issue? Would I use add_filter to alter the html to put a div around the tooltip that i could then add the bg image to? Something with css "content:", a js solution?

Answer 1

Got the answer elsewhere.Will accept unless someone can think of something better.
http://jsfiddle.net/D2KFX/2/
This works perfectly using CSS (albeit adding content with the content: declaration) by drawing a triangle with borders instead of using an image for it.
CSS
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
position: relative;
}
.wpcf7-not-valid-tip:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 10px;
left: 50%;
margin-left: -10px;
}