使用HTML / CSS在导航栏中实现某个效果的问题

Question

晚上好，

最近，我的一位客户聘请了插画师来重新设计他的网站。他想出了一个有趣的设计，我接受了改变旧风格的任务。

我对网站的其余部分没有任何问题，但是他设计的导航栏让我头疼。就像这样：

如红色圆圈所示，图像徽标与导航栏重叠，并且无缝地转换到主页面。

在我的主要问题中，我完全不知道如何调用这种效果，我发现无法搜索它。我尝试了几次黑客攻击（使用不同的阴影在导航栏顶部制作一张图片，在导航栏顶部制作一个叠加按钮等），但没有成功。有谁知道如何实现这种效果？我不想问客户是否考虑放弃这个，但我更多的是程序员而不是设计师。

使用外部库或框架来实现这一点我没有问题，我只是迫切需要一个关于这个样式的指针....

Answer 1

SVG或透明png是更好的选择，否则使用CSS就可以达到这个效果。使用以下代码来表达想法：

＆＃13;

＆＃13;

.wrap {
  position: relative;
  height: 400px;
  width: 100%;
  margin: 0 auto;
}

.curve {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 10;
}

.curve:after {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 90%;
  border-radius: 0 50% 0 0;
  box-shadow: 0 0 0 999px #333;
}

.rectangle {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  background: #333;
}


/*Example 2*/

div.s {
  background: #333;
  width: 50px;
  height: 75px;
  position: relative;
}

div.s:before {
  content: '';
  background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, #333 100px);
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 75px;
}

div.s:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 75px;
  background: #333;
  border-radius: 0 0 100% 0 / 0 0 100% 0;
  top: 100%;
  left: 0;
}

＆＃13;

<div class="wrap">
  <div class="curve"></div>
  <div class="rectangle"></div>

</div>


<!--Example 2-->
<div class="s">

</div>

＆＃13;

＆＃13;

＆＃13;

请参阅codepen：https://codepen.io/Omi236/pen/BZEpLO