在菜单栏中为徽标创建切口答案

【问题标题】：creating cut-out in the menu bar for logo在菜单栏中为徽标创建切口
【发布时间】：2019-12-04 00:54:26
【问题描述】：

我对使用 CSS 的菜单中间的切口有疑问。让我再解释一下：我有一个两边都有三个“li”项目的菜单，我想在菜单中间放一个标志，并为它创建一个像这样的切口：

我想到的第一件事是将菜单分为两部分 - 左侧和右侧。之后使用“剪辑路径”尝试修改左侧菜单的结尾和右侧菜单的开头并使用“位置：绝对”，在切口中间放一个标志，但我不确定这个解决方案。

也许您可以提出更好的建议？

徽标是透明的，并且背景图片应在徽标下方可见，因为菜单位于图片上方。

设计截图：

【问题讨论】：

如果你要用（圆形？）图像覆盖它，为什么要创建一个切口？
@RickardElimää 我想在图像周围加一个边框。
也许在这一点上，我可以尝试创建一个围绕图像的边框？
更好的方法是使用圆形样式的图像，然后您可以使用 CSS 明智地定位它
@Utkarsh 这行得通，但我忘了提到菜单下方的背景图像和徽标本身是透明的，因此图像应该在那个小切口处可见。

标签： html css

【解决方案1】：

我想了解有关径向渐变的更多信息，因此这里可能是您的问题的解决方案。

:root {
  --background-cutout: 30px;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-image: linear-gradient(-130deg, lightblue, red);
}

nav {
  height: 30px;
  width: 100%;
  display: flex;
}

nav > div:not(.middle) {
  flex: 1 1 auto;
  background: cyan;
}

nav > div.middle {
  width: calc(var(--background-cutout) * 2);
  background-image:
    radial-gradient(circle at bottom, transparent 20px, aqua 21px); /* creates the "hole */
    
  display: flex;
  justify-content: center; /* place .circle in center */
  align-content: end; /* place .circle in the bottom */
}

nav > div.middle > .circle {
  height: var(--background-cutout);
  width: var(--background-cutout);
  border-radius: 50%;
  box-sizing: border-box; /* only needed because I used a border */
  border: 5px solid aqua;
  transform: translateY(50%);
}

<body>

<nav>
  <div class="left"></div>
  <div class="middle">
    <div class="circle"></div>
  </div>
  <div class="right"></div>
</nav>

</body>

【讨论】：

嗯，这很好！谢谢！