Multiple background-images and a background-color

Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3?

I can use multiple background images:

div.arrow{
    background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}

The html:

<div class="arrow">This text is on a transparent background</div>

This gives me an div with an arrow-head and tail, and a transparent middle-section. It does not seem possible specify the color to the middle section.

With only one background-image, you could do this:

div.arrow{ background: red url('some_image.png') no-repeat; }

I know this is doable in lots of ways, but is the background-color property really lost from the shorthand definition?