CSS3 label tag facing right and using position or :after

Question

I am trying to construct this shape in CSS:

But I can't figure out how to put the triangle shape (considering I have a rectangle for the "body" of the tag and a triangle for the tip) facing right. Because I'm working with positions, how can I tell the triangle to appear right after the rectangle, when tags can all have different sizes? I just can't work it out.

You can check the fiddle: http://jsfiddle.net/ExZFe/ with a similar tag to the one I'm making. This example uses just positions, so giving the triangle a fixed position is useless. I tried with :after but got stuck too, because of the same reason. What am I missing? Thank you in advance.

Answer 1

Simply position the triangle using the right property (which start from the right of the rectangle) instead of the left (which starts from the left of the rectangle and is useless here as you can't know the width of the tags): http://jsfiddle.net/Gv3rf/

Answer 2

Just add a line-height to .tag

.tag {
line-height: 10px;
/* the rest of your styles here */
}

http://jsfiddle.net/ExZFe/3/