How to make responsive SVG/CSS background with aspect ratio

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

How can I make it with CSS?

Solution

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>