晚上好,

最近,我的一位客户聘请了插图画家来重新设计他的网站。他提出了一个有趣的设计,而我接下了改变旧风格的任务。

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

html - 在使用HTML/CSS的导航栏中无法达到一定效果的问题-LMLPHP
如红色圆圈所示,图像徽标与导航栏重叠,并且看上去过渡到主页。

在我的主要问题中,我完全不知道该效果如何称呼,我发现无法搜索到它。我尝试了一些技巧(使品牌形象成为具有不同阴影的导航栏顶部的图片,使导航栏顶部的覆盖按钮等),但没有成功。有谁知道如何实现这种效果?我不愿意问客户他是否会考虑放弃这一点,但我更多是程序员,而更少是设计师。

我使用外部库或框架来实现此目标没有问题,我只需要一个有关该样式到底是什么的指针。

最佳答案

SVG或透明png是更好的选择,否则使用CSS可以达到这种效果。使用以下代码来构想:



.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;
}

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

</div>


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

</div>





请参阅代码笔:https://codepen.io/Omi236/pen/BZEpLO

关于html - 在使用HTML/CSS的导航栏中无法达到一定效果的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45129138/

10-12 13:04
查看更多