晚上好,
最近,我的一位客户聘请了插图画家来重新设计他的网站。他提出了一个有趣的设计,而我接下了改变旧风格的任务。
我对网站的其余部分没有任何问题,但是他设计的导航栏让我头疼。就像这样:
如红色圆圈所示,图像徽标与导航栏重叠,并且看上去过渡到主页。
在我的主要问题中,我完全不知道该效果如何称呼,我发现无法搜索到它。我尝试了一些技巧(使品牌形象成为具有不同阴影的导航栏顶部的图片,使导航栏顶部的覆盖按钮等),但没有成功。有谁知道如何实现这种效果?我不愿意问客户他是否会考虑放弃这一点,但我更多是程序员,而更少是设计师。
我使用外部库或框架来实现此目标没有问题,我只需要一个有关该样式到底是什么的指针。
最佳答案
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/