斜めに背景画像でdivを切り取る

Question

私は斜めの部分の見た目を利用するウェブサイトを作成しようとしています。 I am trying to get this kind of angle.

フルブラウザサポートも必要です。私はポリゴンの修正をたくさん見てきましたが、私はdivを回転させようとしましたが、ブラウザの幅が広がり、ランダムな空白が一番上に残ります。誰かがそれを助けることができれば驚くべきことだ。明確化が必要な場合は、私に知らせてください。

.shape { 
 
    width:400px; 
 
    margin:0 auto; 
 
} 
 
.top { 
 
    height:0; 
 
    border-width:0 0 100px 400px; 
 
    border-style:solid; 
 
    border-color:transparent #d71f55 #d71f55 transparent; 
 
} 
 
.bottom { 
 
    height: 0px; 
 
    background-color:#d71f55; 
 
} 
 

 
/* Support transparent border colors in IE6. */ 
 
* html .top { 
 
    filter:chroma(color=#123456); 
 
    border-top-color:#123456; 
 
    border-left-color:#123456; 
 
}

<div class="shape"> 
 
    <div class="top"></div> 
 
    <div class="bottom"></div> 
 
</div>

Answer 1

この例のコードは、「現代」のブラウザで動作しますが、あなたは、ブラウザのプレフィックスを追加する場合、私は戻ってIE9に働くことができると信じています。回転したdivを「切り捨て」として使用しますが、そのdivをoverflow: hiddenコンテナに入れて、あなたが話していた空白を取得しないようにします。私はhttp://jsfiddle.net/UYRFY/2713/これを試してきたが、角度が、私はそれを必要とする方向ではなく、私が苦労変更が生じています

.wrapper { 
 
    background: url(http://placehold.it/400/400/); 
 
    width: 400px; 
 
    height: 400px; 
 
    overflow: hidden; 
 
    border: 10px solid black; 
 
    position: relative; 
 
} 
 

 
.cut { 
 
    background: #fff; 
 
    position:absolute; 
 
    top: 300px; 
 
    left: -50px; 
 
    width: 500px; 
 
    height: 300px; 
 
    transform-origin: center top; 
 
    transform: rotate(8deg); 
 
}

<div class="wrapper"> 
 
    <div class="cut"> 
 
    </div> 
 
</div>