You could join two elements, one that creates the arrow tip, and the other that creates the "label". Here's an example:
<span style="white-space: nowrap;"><span style="display: inline-block; width: 0; height: 0; border-width: 14px 18px 14px 0; border-color: transparent black transparent transparent; border-style: solid;"></span><span style="display: inline-block; height: 28px; width: 130px; background: black; border-radius: 0 5px 5px 0;"></span></span>
And the result is:
-
This is a great place to start if you quickly need to create a triangle using CSS.
But note: the support of inline-css (like many other great features) is removed in the mobile skin- on which case, usage of images is better. But if you use it for a signature or something like that, you shouldn't really worry about it.