divの底だけを傾斜/傾斜させる方法

Question

divの下部に斜め/斜めを追加しようとしています。私はいくつかの成功を収めてきました。あなたが私のJSFiddleで以下に示すように、私はスキューを適用することができましたが、私が望んでいた方法とは完全に一致しません。現在、スキューがdivのイメージが常駐、このスキューはまた、あなたがスキューを脱いであれば（、あなたが表示されます画像自体に適用しているように見えるの上部と下部に適用される

https://jsfiddle.net/hcow6kjr/

画像はわずかに元に戻って回転します）。次の調整をすることが可能かどうか、また私がそれらについてどうやって行っていいのか疑問に思っていました...

1 - スキューをに適用します。画像が存在するdivの 。

2 - 画像にスキューを適用しないでください。画像が水平になります（意味がある場合）。事前に

HTML

<div> 
<h1> 
<img src="http://www.visiontechautomotive.co.uk/visiontech/wordpress/wp-content/uploads/2016/08/visiontech-hero-test-1.jpg"> 
</h1> 
</div> 

CSS

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; 
} 

感謝。

UDPATE：私はJSFiddleを提供し、サイトのIMビルドの変更を複製することができたと思っていますが、実際に使用される実際の環境を見るのに役立つと思います。

http://www.visiontechautomotive.co.uk/visiontech/wordpress/

Answer 1

あなた<img>transform : skewY(2deg);を追加することで、あなたのdivの反対スキューを与えます。これにより、画像の下部が歪んでしまいます。後半の応答のため申し訳ありません

CSS

img { 
    -webkit-transform: skewY(2deg); 
    -moz-transform: skewY(2deg); 
    -ms-transform: skewY(2deg); 
    -o-transform: skewY(2deg); 
    transform: skewY(2deg); 
} 

結果

JSFiddle