Multiple background-images and a background-color

Question

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

Answer 1

I find using multiple background images to be problematic for things like this. Have you considered using the :before and :after pseudo elements? I wrote up a quick example:

This text is on a transparent background

Just replace the background color in the :before and :after declarations to the arrow images you want.