Question

基本上我想要的是一个CSS三角形，它在我的内容的中心垂直对齐，位于我的内容的右侧，有一个轻微的填充，而没有使用基于三角形border-width的显式测量。

如果三角形很大，那么包装器应该展开以包含CSS Triangle，就像在这个例子中一样，CSS Triangle应该始终在包装器的中间垂直对齐。如果有大量文本，则CSS三角形应该在文本交叉时与文本重叠。

这似乎完全合理，但我遇到了一些问题;看看这个JsFiddle我现在所处的位置。

如果我指定了min-height，我可以转到下面的1.。 1.的问题是我必须选择任意高度。此外，如果内容增长，它将不会完全垂直居中，因为top: 25%没有真正把它放在中间。为了容易地允许多种不同尺寸的箭头，我真的不想为此分配最小高度或任何高度，我只是想让它自己计算它的大小。

我还必须使用overflow: hidden来阻止滚动条出现，因为执行right: -45px会推动CSS三角形框的“右侧”，因此我无法使用overflow: visible 1}}任何地方。

如果我删除固定高度，那么我最终会得到2.

这是否可以不使用显式高度和其他显式测量;你将如何正确地垂直对齐它？如果你有想法使用jQuery来获取宽度等等，那也很好 - 我已经标记了它。

CSS Triangle Image

Answer 1

在白盒子容器上设置position: relative;。

在三角形上设置position: absolute;，其顶部为50％，margin-top:为三角形高度的一半。

这将确保三角形始终处于中间位置。

Answer 2

在为你的div分配一个arrowBox类之后，这里有一些jQuery可以摆脱硬编码的高度：

$(document).ready(function(){
  $(".arrowBox").each(function(){
    var border = $(this).height()/4;
    var right = "-"+(border-5)+"px";
    $(this).find(".arrow").css("border-width",border).css("right",right);
  });
});

http://jsfiddle.net/wzzRC/1/

也就是说，任何纯CSS解决方案的难点在于你不能用％来指定border-width。因此，对于纯CSS，使用其他解决方案之一强制盒子增长以容纳箭头。如果你想在一个较小的框中使用工作箭头，你需要JS。

Answer 3

将三角形css更改为：

top: 50%;
margin-top: -50px;

http://jsfiddle.net/QuwEc/4/

CSS三角定位

3 个答案: