伙伴们好
我想看看是否有人能建议我如何做以下事情：
在我正在制作的一个网络应用程序中，我有一个风格化的NavBar，如照片所示(在AdobeXD中，它显示为矩形和圆形的并集(。
导航示例AdobeXD |完整视图
如何使用HTML/CSS制作导航栏
我已经有了以下内容，但我有一个问题，如何合并矩形的div和圆形的div，以便具有相同的阴影和相同的线性梯度，有可能做到吗？🥺还是将导航导出为SVG更好？
body{
margin: 0;
}
.navContainer{
width:100vw;
}
.mainNav{
width:100vw;
background: linear-gradient(#30355e 0%, #383e6e 100%);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
height: 73px;
border-radius: 0 0 40px 40px;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.25));
}
.circleNav{
width:110px;
height:110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
position: absolute;
left: calc(50% - 57px);
top: 10px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}<html>
<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>
</html>您可以按照以下方式进行操作：
body {
margin: 0;
}
.navContainer {
width: 100vw;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.45)); /* filter on main container */
}
.mainNav {
background:
linear-gradient(#30355e 0%, #383e6e 100%)
top/100% 110px; /* 110px = height of circle */
height: 75px;
border-radius: 0 0 40px 40px;
}
.circleNav {
width: 110px;
height: 110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
margin: -75px auto 0; /* same as height of nav */
}<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>或者使用下面这样的简化代码：
body {
margin: 0;
}
.navContainer {
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.45)); /* filter on main container */
height: 110px;
}
.navContainer::before,
.navContainer::after{
content:"";
position:absolute;
top:0;
height:100%;
border-radius: 50%;
background-image:linear-gradient(#30355e, #a3aae4);
}
.navContainer::before {
left:0;
right:0;
height:70%;
background-size:100% calc(100%/0.7);
background-position:top;
border-radius: 0 0 40px 40px;
}
.navContainer::after {
left:50%;
aspect-ratio:1/1; /* the support of this is low so you can replace it with width:110px */
transform:translate(-50%);
}<div class="navContainer">
</div>