SVG trapezoid (polygon) with points relative to other points and gradient
<p>I've exhausted a lot of options in my search for a way to make this shape and I'm starting to think this may not be possible. Basically I'd like a responsive, full width trapezoid <em>with a gradient across it</em>. I've gotten most of the way there using SVG, but the points that shrink on the Y axis are relative to the viewbox so when the the trapezoid stretches vertically or shrinks horizontally things begin to look wonky:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"&gt;&lt;/script&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;

  &lt;style&gt;
    * {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }
    body,
    html {
      /* background:red; */
    }
    .trap-container {
      position: relative;
      width: 100%;
    }
    .trap-container svg {
      position: absolute;
    }
    .trap-content {
      position: relative;
      color: black;
      padding: 40px 20px;
    }
  &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;div class="trap-container"&gt;

    &lt;svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"&gt;
      &lt;defs&gt;
        &lt;linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"&gt;
          &lt;stop offset="0%" stop-color="yellow" stop-opacity="1" /&gt;
          &lt;stop offset="100%" stop-color="orange" stop-opacity="1" /&gt;
        &lt;/linearGradient&gt;
      &lt;/defs&gt;
      &lt;polygon points="0,10 100,0 100,100 0,90" fill="url(#grad1)"&gt;
      &lt;/polygon&gt;
    &lt;/svg&gt;

    &lt;div class="trap-content"&gt;
      This DIV works fine with minimal content. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
    &lt;/div&gt;

  &lt;/div&gt;

  &lt;br /&gt;
  &lt;br /&gt;

  &lt;div class="trap-container"&gt;

    &lt;svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"&gt;
      &lt;defs&gt;
        &lt;linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"&gt;
          &lt;stop offset="0%" stop-color="yellow" stop-opacity="1" /&gt;
          &lt;stop offset="100%" stop-color="orange" stop-opacity="1" /&gt;
        &lt;/linearGradient&gt;
      &lt;/defs&gt;
      &lt;polygon points="0,10 100,0 100,100 0,90" fill="url(#grad1)"&gt;
      &lt;/polygon&gt;
    &lt;/svg&gt;

    &lt;div class="trap-content"&gt;
      But stretch it out and the trapezoid angles are off because they are relative. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here.
    &lt;/div&gt;

  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Is there a way to make a point in an SVG polygon positioned relative to another point? For instance, make the y position of one point 10 pixels lower than another point. I believe I could probably accomplish this with some javascript, but it would be nice to find a solution without it.</p>

<p><a href="https://i.stack.imgur.com/4jySO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4jySO.png" alt="enter image description here"></a></p>