Tag de etiqueta CSS3 voltada para a direita e usando posição ou: depois

Eu estou tentando construir essa forma em CSS:

Mas eu não consigo descobrir como colocar a forma do triângulo (considerando que eu tenho um retângulo para o "corpo" da tag e um triângulo para a ponta) voltado para a direita. Como estou trabalhando com posições, como posso dizer ao triângulo para aparecer logo após o retângulo, quando as tags podem ter tamanhos diferentes? Eu simplesmente não consigo resolver isso.

Você pode conferir o violino:http://jsfiddle.net/ExZFe/ com um tag similar ao que eu estou fazendo. Este exemplo usa apenas posições, portanto, dar ao triângulo uma posição fixa é inútil. Eu tentei com: depois, mas ficou preso também, pelo mesmo motivo. o que estou perdendo? Agradeço antecipadamente.