CSS3 标签标签朝右并使用位置或 :after答案

【问题标题】：CSS3 label tag facing right and using position or :afterCSS3 标签标签朝右并使用位置或 :after
【发布时间】：2015-05-14 11:58:18
【问题描述】：

我正在尝试在 CSS 中构造这个形状：

但我不知道如何将三角形（考虑到标签的“主体”有一个矩形，尖端有一个三角形）朝向右侧。因为我正在处理位置，当标签都可以有不同的大小时，我怎么能告诉三角形出现在矩形之后？我就是搞不定。

您可以检查小提琴：http://jsfiddle.net/ExZFe/，其标签与我正在制作的标签相似。这个例子只使用了位置，所以给三角形一个固定的位置是没有用的。由于同样的原因，我尝试了 :after 但也被卡住了。我错过了什么？提前谢谢你。

【问题讨论】：

【解决方案1】：

只需在 .tag 中添加行高

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

【讨论】：

【解决方案2】：

使用right 属性（从矩形的右侧开始）而不是left（从矩形的左侧开始，在这里没有用处）简单地定位三角形你不知道标签的宽度）：http://jsfiddle.net/Gv3rf/

【讨论】：