Pure CSS Responsive Trapezoid with borders and background colour
<p>So i wanted to create a responsive trapezoid where you can apply a border and a background colour to it
I already created one using 3 div blocks but i cant get the border at the top of the trapezoid to stay inline when the width and height is changed
So my question is either.
can someone help me figure out how to keep the line at the top of the trapezoid in line with the left and right border
or if anybody knows of a different solution?
Here is my code....</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.trapezoid-container{
   position: relative;
  margin-left: 100px;
  width: 200px;
  height: 200px;
  
  }
.trapezoid {
 background: green;
 position: relative;
 position:absolute;
   content:"";
 width: 70%;
 height: 100%;
 border-top: 5px solid black;
 border-bottom: 5px solid black; 
 left: 20px;
}
.trapezoid:before {
 background: green;
 position:absolute;
   content:"";
 width: 60%;
height: 100%;
left: 63%;
border-right: 5px solid black;
border-bottom: 5px solid black;
transform: skew(20deg); 
}
.trapezoid:after {
 background: green;
 position:absolute;
   content:"";
 width: 60%;
height: 100%;
left: -28%;
border-left: 5px solid black;
border-bottom: 5px solid black;
transform: skew(-20deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="trapezoid-container"&gt;
&lt;div class="trapezoid"&gt;
&lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks guys :)</p>