title: Shape with a slanted side (responsive)
body: <p>I am trying to create a shape like in the image below with a <strong>slanted edge on only one side</strong> (for example, the bottom side) while the other edges remain straight.</p>
  
  <p><img src="https://i.stack.imgur.com/ywYFD.png" alt="CSS div with a slanted side"></p>
  
  <p>I tried using the border method (code is given below) but the dimensions of my shape are dynamic and hence I cannot use this method.</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>.shape {
      position: relative;
      height: 100px;
      width: 200px;
      background: tomato;
  }
  .shape:after {
      position: absolute;
      content: '';
      height: 0px;
      width: 0px;
      left: 0px;
      bottom: -100px;
      border-width: 50px 100px;
      border-style: solid;
      border-color: tomato tomato transparent transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="shape"&gt;
      Some content
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>I have also tried using gradients for background (like in the below code) but it gets messed up as the dimensions change. You can see what I mean by hovering on the shape in the below snippet.</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-css lang-css prettyprint-override"><code>.gradient {
    display: inline-block;
    vertical-align: top;
    height: 200px;
    width: 100px;
    margin: 10px;
    color: beige;
    transition: all 1s;
    padding: 10px;
    background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
  }
  .gradient:hover {
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="gradient"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I create this <strong>shape with a slanted side</strong> and also be able to support <strong>dynamic sizes</strong>?</p>