如何制作具有宽高比的响应式 SVG/CSS 背景

Question

我的 header 位置是 relative 并且我有一个 absolute SVG 图像，在徽标旁边有倾斜的边缘（单边梯形）。徽标区域应固定 450px 并且 svg 图像应按响应宽度拉伸（不改变 SVG 的角度。）

这是我正在寻找的概念：（灰色部分是我的SVG）

<html lang="fa" dir="rtl">
<body>
<header>
  <svg viewBox="0 0 2000 100" height="100">
    <polygon points="0,0 2000,0 1950,100 0,100 z" fill="navy" />
  </svg>
  <div class="container">
    <div class="logo-area">
      <img scr="logo.png" class="logo"/>
    </div>
    <nav>
      <ul>
        <li>...</li>
        <li>...</li>
      </ul>
    </nav>
  </div>
</header>
</body>
</html>

header{
  position: relative;
}

header svg{
  position: absolute;
  left: 0;
  top: 0;
}

header .logo-area{
  width: 450px;
}

header .logo{
  text-align: right;
}

@media (min-width: 1024px)
.container {
    max-width: 1024px;
}

@media (min-width: 1366px)
.container {
    max-width: 1366px;
}

.container{
  margin-right: auto;
  margin-left: auto;
}

header .container nav{
  text-align: left;
  float: left;
  direction: ltr
}

如何使用 CSS 实现？

Answer 1

此处 navy-blue SVG 的宽度为 5000px。它位于右侧 100px 并且 header 的溢出被隐藏。因此，SVG 的 some/most 隐藏在左侧。徽标图像也绝对定位在右侧。

（图像也是 SVG，但在 <img> 中）

header {
  position: relative;
  height: 100px;
  overflow: hidden;
}

header svg {
  position: absolute;
  right: 100px;
}

header img {
  position: absolute;
  right: 0;
}

header nav {
  position: relative;
  color: white;
}

@media (min-width: 1024px) {
  header {
    max-width: 1024px;
  }
}

@media (min-width: 1366px) {
  header {
    max-width: 1366px;
  }
}

<header>
  <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdHRlcm4gaWQ9InAxIiB2aWV3Qm94PSIwIDAgMTAgMTAiIHdpZHRoPSIxJSIgaGVpZ2h0PSIzJSI+CjxjaXJjbGUgcj0iNSIgY3g9IjUiIGN5PSI1IiBmaWxsPSJuYXZ5Ii8+CjwvcGF0dGVybj4KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjcDEpIi8+Cjwvc3ZnPg=="
    alt="logo" width="300" height="100" />
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 100" height="100">
    <polygon points="0,0 5000,0 4950,100 0,100 z" fill="navy" />
  </svg>
  <nav>
    <ul>
      <li>Menu</li>
      <li>Menu</li>
    </ul>
  </nav>
</header>

如何制作具有宽高比的响应式 SVG/CSS 背景

How to make responsive SVG/CSS background with aspect ratio

css

svg

responsive

aspect-ratio