我知道我们可以使用与背景颜色颜色相同的三 Angular 形，以便在导航的当前状态下放置一个缺口。但是，我在固定位置的 div 中创建了一个导航菜单，它具有高 z-index 和背景颜色设置为 .7 的不透明度，以便整个导航位于页面内容的顶部，但您可以向下滚动页面时可以看穿它。是否可以创建一个当前状态槽口，在您向下滚动页面时“切入”不透明的 div 以显示其下方的内容？
作为引用，我正在尝试复制您在 iOS 应用商店中获得的体验。不幸的是，图片已被删除，点击图片链接会出现 404 页面。您可以查看修订历史以查看图像的原始 URL。
最佳答案
有很多方法可以做到这一点，这是我的看法:
这是我会使用的布局。 <nav>固定在顶部 <div>对于下方的缺口。内容位于两个顶部填充等于导航和槽口高度的内容下方。
+--------------------------------+--+
| | |
| nav (fixed) | | <-- the content is below these fixeds,
| | | which have a higher z-index
+--------------------------------+ |
| notch (fixed) | |
+--------------------------------+ |
| |
| |
| |
| content |
| section |
| (padding-top = nav+notch heights) |
| |
| |
+-----------------------------------+
我假设你想要一个流畅的布局，所以我选择使用 FlexBox (http://www.w3.org/TR/css3-flexbox/) 来保持缺口的位置，因为浏览器调整大小。如果您有固定布局，则有几个更直接的解决方案，它们不需要 FlexBox 或计算应在柔性容器中放置凹口的位置。
由于其他部分应该相当简单，这里是缺口的分割 <div>
+---------------------------------------------------+
| | | | |
| spacing | notch | notch | spacing |
| (flexible) | left | right | (flexible) |
| | | | |
+---------------------------------------------------+
二外<div> s 是 flex 的并且具有相同的 background-color作为<nav> .然后，两个内部槽口使用渐变来创建三 Angular 形。
background: -webkit-linear-gradient(
top left,
rgba(145, 145, 145, 1) 0%,
rgba(145, 145, 145, 1) 50%,
transparent 50%,
transparent 100%
);
通过从左上角和右上角开始渐变，<div> s 填充在对 Angular 线上的一半。
剩下的只是确定当您点击导航链接时应该放置凹口的位置。我通过在灵活的 <div> 中添加和删除宽度来做到这一点s 在确定用户点击的位置之后。需要一些时间来了解 FlexBox 在为 flex 的元素添加和减去宽度时如何工作，但您可以检查代码以了解这一点。
我在 Chrome 中使用 -webkit- 前缀完成了所有这些，所以请在 Chrome 或 Safari 中运行这个 JSFiddle:http://jsfiddle.net/dwJbq/
正如我之前所说，还有其他几种方法可以做到这一点，如果不使用流体布局，它也会容易得多。您可以尝试的另一个想法是为每个导航链接设置一个缺口，然后在单击的链接下方显示/隐藏该缺口。这不需要您进行任何计算，而只需更改凹口的背景即可。
这是一个如何做到这一点的例子:http://jsfiddle.net/V4K6K/1/
关于css - 如何在固定菜单上创建透明的当前状态槽口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13196588/