0

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

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

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

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

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

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

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

CSS 三角形图像

4

3 回答 3

2

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

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

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

于 2013-10-09T13:49:43.507 回答
2

这是一些 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。

于 2013-10-09T14:23:46.687 回答
1

将三角形 css 更改为：

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

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

于 2013-10-09T13:48:45.907 回答