我正在为我的网站创建导航菜单,希望背景是由两个矩形SVG组合而成,每个都略微偏离轴线并重叠。边缘将延伸超出屏幕边缘,以便看不到。在所有断点处,SVG的高度应保持相同(120px),并且导航应在容器内垂直居中(尽管由于旋转而显得偏离中心)。我的当前尝试会导致随着浏览器窗口的调整,SVG的高度缩小,此外还存在一些对齐问题。是否有更好的方法来完成这个任务?
一旦我能完成这些背景条,我的计划是使用MorphSVG对它们进行动画处理并略微改变形状(使它们不是完美的矩形),随着用户滚动屏幕。因此,解决方案必须使用SVG代替其他解决方案。
这是我期望结果的模拟图。导航将在容器中,但红色/黑色条应在任何屏幕大小下延伸到屏幕边缘:
.hero-bg {
height:20vh;
min-height:200px;
max-height:350px;
width:100%;
background:url('http://placehold.it/1920x1080');
background-size:cover;
}
.navigation {
position:relative;
height:120px;
overflow:hidden;
}
.nav-bg-1 {
fill:red;
}
.nav-bg-2 {
fill:black;
}
.navigation svg {
position:absolute;
top:-10px;
width:110%;
left:-5%;
}
.navigation ul {
list-style-type:none;
padding:0;
margin:0;
position:absolute;
top:50%;
transform:translateY(-50%);
}
.navigation ul > li {
display:inline-block;
}
.navigation ul > li > a{
color:#fff;
text-transform:uppercase;
text-decoration:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<section id="hero">
<div class="hero-bg"></div>
<div class="navigation">
<svg viewBox="0 0 2027.79 155.34">
<rect class="nav-bg-1" x="953.89" y="-935.33" width="120" height="2026" transform="translate(918.54 1090.05) rotate(-89)"/>
<rect class="nav-bg-2" x="0.89" y="14.67" width="2026" height="120" transform="translate(-0.32 4.42) rotate(-0.25)"/>
</svg>
<div class="container">
<div class="row">
<div class="col-sm-4 hidden-xs">
<!-- LOGO -->
</div>
<div class="col-sm-8">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
这是我期望结果的模拟图。导航将在容器中,但红色/黑色条应在任何屏幕大小下延伸到屏幕边缘:
preserveAspectRatio="none"
。 - brouxhaha