title: Responsive CSS Trapezoid Shape
body: <p>I'm looking to create a responsive trapezoid shape which can be in either CSS, SVG or Canvas.</p>
  
  <p><a href="https://i.stack.imgur.com/VY423.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VY423.png" alt="Trapezoid Shape"></a></p>
  
  <p>I have been able to create the triangle shape but not a trapezoid shape that is responsive.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 0;
    height: 0;
    border-top: 5vw solid transparent;
    border-left: 10vw solid red;
    border-bottom: 5vw solid transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have seen there are many questions on SO already that encompass a trapezoid shape but very little have reasons why they are better than other methods and also a large majority aren't responsive.</p>
  
  <p>As an example, these questions don't require responsiveness and therefore the answers aren't responsive:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/5293736/css3-transform-skew">CSS3 Transform Skew</a></li>
  <li><a href="https://stackoverflow.com/questions/30227367/create-an-adaptive-quadrilateral-trapezoid-in-css">create an adaptive quadrilateral trapezoid in css</a></li>
  </ul>