css - CSS3 label タグを右向きにし、position または :after を使用

Question

CSSでこの形状を構築しようとしています:

しかし、三角形の形状を右に向ける方法がわかりません(タグの「本体」に長方形があり、先端に三角形があることを考えると)。私は位置を扱っているので、タグのサイズがすべて異なる場合、長方形の直後に三角形を表示するにはどうすればよいでしょうか? 私はそれを解決することはできません。

フィドルを確認できます: http://jsfiddle.net/ExZFe/で、私が作成しているものと同様のタグを付けます。この例では位置だけを使用しているため、三角形に固定位置を指定しても意味がありません。私は :after で試しましたが、同じ理由で行き詰まりました。私は何が欠けていますか？前もって感謝します。

Answer 1

プロパティ (長方形の左から開始し、タグの幅がわからないため、ここでは役に立ちませんright) の代わりに、プロパティ (長方形の右から開始) を使用して三角形を配置するだけです: http:// jsfiddle.net/Gv3rf/left

Answer 2

Just add a line-height to .tag

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

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