How to make responsive SVG/CSS background with aspect ratio-CodePudding

My header position is relative and I have an absolute SVG image with inclined edge (One side trapezoid) beside of Logo. The Logo area should be fixed 450px and the svg image should be stretch in responsive widths (without changing angles of SVG.)

Here is the concept that Im looking for: (The gray section is my 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 >
    <div >
      <img scr="logo.png" />
    </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
}

How can I make it with CSS?

CodePudding user response：

Here the navy-blue SVG has the width of 5000px. It is positioned 100px right and the overflow of the header is hidden. So, some/most of the SVG is hidden to the left. The logo image is also positioned absolute and to the right.

(the image is also a SVG, but in a <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>