The shape change when the window decrease with svg - html

Question

I'm currently working on a website and I need help on a svg trapezoid shape.
I decided to use SVG because, before that, my trapezoid was realized with css and the main problem with that is that is wasn't responsive as I expected.
This is the shape I would like : Trapezoid.
I've already realized this shape but the problem is when the window size decrease the shape look like that.
So my question is, does there any ways to "lock" the points to keep the shape of the 1st image ?
HTML :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="84%" height="200" preserveAspectRatio="none">
<polygon fill="blue" points="1.5 0, 100 0, 85 100, 1.5 100"/>
...
</svg>
Edit:
Thanks to Paulie_D, i've patched my problem with :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
<polygon fill="#00a8f3" points="1.5 0, 100 0, 0 100, 1.5 100"/>
...
</svg>
But now I would like to add another trapezoid at the right of the 1st like that but as before, my problem isn't on how to realize the shape but on how it render with this code :
<div class="col-md-2 col-xs-12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" transform="rotate(180)" class="spaceBetweenButton">
<polygon fill="#00a8f3" points="0 0, 130 0, 0 130, 0 130" />
</svg>
</div>
And how it appear. At first sight I thought that the problem was in the preserveAspectRatio so I've tried to replace it by xMaxYMin slice off but I didn't found a way to have a decent result with it.
So I have 2 problem, how to extend the right trapezoid (I think it's with the width of the svg) and how to move it on the left. I've tried to add margin but the space between the 2 trapezoid changes when we resize the window.
Thanks for your help.
Valentin.

Answer 1

Just add another polygon to your SVG.
Move the right hand end of the first polygon left a bit
Add a second polygon of the right shape, to the right of that, leaving an appropriate gap.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
<polygon fill="#00a8f3" points="0 0, 83 0, 0 83"/>
<polygon fill="#00a8f3" points="85 0, 100 0, 100 100, 0 100, 0 85"/>
</svg>