title: Skew one corner of image
body: <p>I'm trying to skew one single corner of my div background as shown at the green checkmark in the image below:</p>
  
  <p><img src="https://i.stack.imgur.com/Lc68l.png" alt="enter image description here"></p>
  
  <p>In CSS3 I'm however unable to achieve that, skewing completely skews every corner. I just want to skew the bottom right corner to the left (say 25px) and maintain the perspective (as shown in the image above).</p>
  
  <pre><code> background-image: url('http://rtjansen.nl/images/stackoverflow.png');
  -webkit-transform: skew(-45deg);
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/3eX5j/" rel="noreferrer">http://jsfiddle.net/3eX5j/</a></p>
  
  <p>My code is:</p>
  
  <pre><code>div {    
      width: 300px;
      height:80px;
      margin-left:40px;
      background-image: url('http://rtjansen.nl/images/stackoverflow.png');
      -webkit-transform: skew(-45deg);
  }
  </code></pre>