Css 如何在固定菜单上创建透明的当前状态凹口？

我知道我们可以使用与背景颜色相同的三角形，以便在导航上的当前状态中设置一个凹口。然而，我已经在一个固定位置的div中创建了一个导航菜单，它有一个高的z索引和背景颜色设置为.7的不透明度，因此整个导航位于页面内容的顶部，但是当你向下滚动页面时，你可以看到它。是否可以创建一个当前状态凹口，在向下滚动页面时“剪切”不透明div以显示其下方的内容

---

作为参考，我试图复制您在iOS应用商店上获得的体验。不幸的是，该图像已被删除，链接到该图像后将显示404页。您可以查看修订历史以查看图像的原始URL。

有很多方法可以做到这一点，以下是我的看法：

这是我将使用的布局。

固定在顶部，下面的槽口有一个

。内容位于两个底部，填充顶部等于导航和槽口的高度

+--------------------------------+--+
|                                |  |
|               nav (fixed)      |  |   <-- the content is below these fixeds,
|                                |  |       which have a higher z-index
+--------------------------------+  |
|              notch (fixed)     |  |
+--------------------------------+  |
|                                   |
|                                   |
|                                   |
|              content              |
|              section              |
| (padding-top = nav+notch heights) |
|                                   |
|                                   |
+-----------------------------------+

两个外部

是弯曲的，具有与

相同的

背景色。然后，两个内部槽口使用渐变创建三角形

background: -webkit-linear-gradient(
    top left,
    rgba(145, 145, 145, 1) 0%,
    rgba(145, 145, 145, 1) 50%,
    transparent 50%,
    transparent 100%
);

通过从左上角和右上角开始渐变，
s以对角线的一半填充

剩下的只是确定当你点击导航链接时，槽口应该放在哪里。在确定用户单击的位置后，我通过添加和删除柔性
的宽度来实现这一点。当从正在弯曲的元素中添加和减去宽度时，需要一些时间来理解FlexBox是如何工作的，但是您可以查看代码来了解这一点

我在Chrome中使用-webkit-prefixes完成了所有这些，因此请在Chrome或Safari中运行此JSFIDLE：

如前所述，还有其他几种方法可以做到这一点，如果不使用流体布局，也会容易得多。您可以尝试的另一个想法是为每个导航链接设置一个槽口，然后在单击的链接下方显示/隐藏槽口。这不需要计算任何内容，只需更改槽口的背景即可

下面是一个如何做到这一点的示例：
非常好。谢谢你。我最初试着用背景来做凹口，但是因为导航是固定的，当你向下滚动页面时，它看起来很奇怪。这应该行得通，我试试看。
background: -webkit-linear-gradient(
    top left,
    rgba(145, 145, 145, 1) 0%,
    rgba(145, 145, 145, 1) 50%,
    transparent 50%,
    transparent 100%
);