title: How to Slant/Skew only the bottom of the div
body: <p>I have been trying to add a Skew/Slant to the bottom of a div. I have had some success, as you can see below in my JSFiddle, I have managed to apply the skew but it's not completely how I wanted it.</p>
  
  <p><a href="https://jsfiddle.net/hcow6kjr/" rel="nofollow noreferrer">https://jsfiddle.net/hcow6kjr/</a></p>
  
  <p>Currently the Skew is applied to the top and bottom of the div the image resides in, this skew also seems to be applied to the image itself (if you take the skew off, you will see the image slightly rotate back to normal). I was wondering if it's possible to do the following adjustments, and how I may go about them...</p>
  
  <p>1 - Apply the skew to <strong>only the bottom</strong> of the div the image resides in, not both as currently is.</p>
  
  <p>2 - Not apply the skew to the image, so that the image sits flat horizontal (if that makes sense).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
  &lt;h1&gt;
  &lt;img src="http://www.visiontechautomotive.co.uk/visiontech/wordpress/wp-content/uploads/2016/08/visiontech-hero-test-1.jpg"&gt;
  &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div {
    background-image: green;
    height: 700px;
    padding: 20px;
    margin-top: 100px;
    -webkit-transform: skewY(-2deg);
    -moz-transform: skewY(-2deg);
    -ms-transform: skewY(-2deg);
    -o-transform: skewY(-2deg);
    transform: skewY(-2deg);
    overflow:hidden;
  }
  </code></pre>
  
  <p>Thanks in advance.</p>