javascript - CSS 三 Angular 形定位

Question

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

如果三 Angular 形像本例中那样很大，则包装器应展开以包含 CSS 三 Angular 形，并且 CSS 三 Angular 形应始终垂直对齐在包装器的中间。如果有大量文本，如果它们交叉，CSS 三 Angular 形应该恰好与文本重叠。

这看起来很合理，但我遇到了一些问题；看看这个JsFiddle我现在所处的位置。

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

我还必须使用 overflow: hidden 来防止滚动条出现，因为执行 right: -45px 会插入 CSS 三 Angular 形的“右侧”框，所以我也不能在任何地方使用 overflow: visible。

如果我删除固定高度，那么我将得到 2。

这是否可能在不使用明确的高度和其他明确的测量值的情况下做到？你将如何正确地垂直对齐它？如果您有使用 jQuery 获取宽度等的想法，那也没关系 - 我已经标记了它。

Answer 1

这里有一些 jQuery 可以在将 arrowBox 类分配给您的 div 后摆脱硬编码的高度:

$(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 解决方案的困难在于您不能以百分比指定边框宽度。因此，对于纯 CSS，使用其他解决方案之一来强制盒子变大以容纳箭头。如果你想要在较小的盒子里工作的箭头，你需要 JS。