CSS3标签标签面向右边并使用position或：after [英] CSS3 label tag facing right and using position or :after

问题描述

我想在CSS中构造这个形状：

I am trying to construct this shape in CSS:

但我不知道如何把三角形的形状（考虑到我有一个矩形的body和一个三角形的尖）面向右。因为我使用位置，我如何告诉三角形出现在矩形后面，当标签可以有不同的大小？我只是不能工作它。

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.

您可以检查小提琴： http：// jsfiddle。 net / ExZFe / ，其中有一个类似的标签。这个例子只使用位置，所以给三角形一个固定的位置是没用的。我试过：后，但被卡住了，因为同样的原因。我缺少什么？

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.

推荐答案

只需使用右属性（从矩形右边开始），而不是 left （从左边开始）无法知道标记的宽度）： http://jsfiddle.net/Gv3rf/

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/

这篇关于CSS3标签标签面向右边并使用position或：after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！