合并两个 div 以获得相同的线性渐变和阴影

Question

伙伴们大家好！

我想看看是否有人可以建议我如何执行以下操作：

在我制作的 Web 应用程序中，我有一个风格化的导航栏，如照片所示（在 AdobeXD 中，它显示为矩形与圆的结合）。

Nav Example AdobeXD | Complete View

如何使用 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>

Answer 1

您可以像下面这样操作：

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>

合并两个 div 以获得相同的线性渐变和阴影

Merge two div to have same linear-gradient and shadow

html

css

merge

shadow