balise label CSS3 vers la droite et en utilisant la position ou: après

Question

Je suis en train de construire cette forme en CSS:

Mais je ne peux pas comprendre comment mettre la forme de triangle (étant donné que j'ai un rectangle pour le "corps" de l'étiquette et un triangle pour l'extrémité) face à droite. Parce que je travaille avec des positions, comment puis-je dire au triangle d'apparaître juste après le rectangle, quand les balises peuvent toutes avoir des tailles différentes? Je ne peux pas m'en sortir.

Vous pouvez vérifier le violon: http://jsfiddle.net/ExZFe/ avec un tag similaire à celui que je suis en train de faire. Cet exemple utilise uniquement des positions, donc donner une position fixe au triangle est inutile. J'ai essayé avec: après mais est resté bloqué aussi, pour la même raison. Qu'est-ce que je rate? Merci d'avance.

Answer 1

Il suffit de positionner le triangle en utilisant la propriété right (qui partent de la droite du rectangle) au lieu du left (qui commence du gauche du rectangle et est inutile ici car vous ne pouvez pas connaître la largeur des tags): http://jsfiddle.net/Gv3rf/

Answer 2

Il suffit d'ajouter une hauteur de ligne à .tag

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

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