CSS导航栏的中心有透明孔（“新材料设计”导航栏）

Question

我已经看到了Material Design的新模型，并且检查了一种在设备上制作底部导航栏的新方法。当有一个按钮时，新的Navbar的中心有一个孔，但是我尝试使用CSS进行创建，但我遇到了一个问题。做到这一点的最佳或正确方法是什么？你能帮我吗？

用孔和按钮查看导航栏：

我试图使用盒形阴影，剪切路径，SVG图像，css蒙版进行此操作...但是我所有的解决方案都有一些局限性。

另一个问题是：将按钮放在导航栏上时具有透明效果吗？还是导航栏上有一个剪裁的部分可以放置按钮？

谢谢！

Answer 1

我建议在这里为简单起见，要完成的事情是透明背景，因此请使用背景。 您可以使用渐变背景轻松创建此效果。渐变背景可让您使用不同的颜色作为背景并使用形状。您可以在脚栏上添加背景。

background: radial-gradient(circle at 150px 0, transparent 50px, #fabada 0) 0 0;

我在这里为您创建一个示例： https://codepen.io/luarmr/pen/ajgabq

对于图标，只需使用border-radius