我有一个关于使用 CSS 在菜单中间剪切的问题。 让我解释更多: 我有一个两边都有三个“li”项的菜单，我想在菜单中间放一个 Logo 并为其创建一个切口，如下所示:
关于如何获得它，我首先想到的是将菜单分为两部分 - 左侧和右侧。之后使用“剪辑路径”尝试修改左侧菜单的末尾和右侧菜单的开始并使用“position:absolute”，在切口中间放置一个 Logo ，但我不确定这个解决方案。
也许您可以提出更好的建议？
Logo 是透明的，背景图像应该在 Logo 下方可见，因为菜单位于图像之上。
设计截图:
最佳答案
我想了解有关径向渐变的更多信息，因此这里可能是您问题的解决方案。
: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>关于html - 在菜单栏中为 Logo 创建切口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59151363/