CSS导航栏：扩展spacer div以填充剩余宽度而不会溢出：隐藏技巧

Question

强文似乎是一个常见的问题，但在我的情况下，由于一些额外的要求而变得复杂，所以我在SO和MDN上找到的并没有让我得到完整的解决方案。

简单的前提： 水平导航栏，页面的全宽，半透明背景，可变数量的标签（额外空间填充与标签相同的背景）。

简单，对吗？给容器元素rgba背景，设置导航项display:inline或float它们就是金色。

并发症1：活动标签必须有一个三角形剪裁（见图）。

好的，我可以通过将背景图像设置为带有透明位的png来实现剪切。父元素的背景会妨碍 - 所以将背景设置为单个元素而不是父元素。

通过标签的可变宽度“空白空间”怎么样（见图）？好的，放一个宽度超过生命宽度的空元素，并在父元素上用overflow:hidden将其剪掉。

并发症2：

按钮在悬停时需要工具提示。 啊，快感！悬念！ overflow:hidden除非我将工具提示完全放在nav div之外（这可能会起作用 - 但看起来很臭），所以display:table不会做。

所以，这里有一些我尝试过的事情：

没有“填充”元素宽度问题的旧实现，但剪切了半个工具提示（溢出：隐藏）： http://codepen.io/istro/pen/aHcdi

与display:table-cell混淆似乎无法控制如何决定{{1}} div宽度，还需要内容才能首先显示div。内容可以移走，但仍然没有好处（甚至没有在这里添加工具提示）： http://codepen.io/istro/pen/uIcfn

与浮动混淆（工具提示sorta，我希望它或多或少），但无知如何使最后一个“填充”元素适合剩余宽度： http://codepen.io/istro/pen/aIGxB

所以问题 - 我怎么能用div来填充剩下的宽度只用CSS？或许我完全会问错误的问题，在这种情况下我会用什么想法来干净利落地实现呢？

感谢!!!