CSS3将文本置于三角形内部

Question

我在页面的左上角有一个三角形图像，一些文本需要在底部居中（使用CSS3 transform: rotate）。我可以使用一些定位/边距来实现它，但它在浏览器中看起来不一样，它在左侧或右侧看起来有点。

有没有办法让它居中，以便在所有浏览器中均匀显示？

我做了example。在这里，我使用CSS制作三角形，但实际上我正在使用图像。

我很感激建议。

Answer 1

如果您知道三角形的基本宽度，则将文本容器的width:设置为等于基本宽度text-align: center;并旋转。请确保，文本容器的中心点也是基础的中心点。

经过一些计算，我做了一个例子：http://jsfiddle.net/VScFS/57/。它在Chrome和Firefox中看起来相同。

无论如何，我认为问题与绝对定位有关。