css - コンテナ内のコンテンツがあふれないように、コンテナの角を切り取るにはどうすればよいですか?

Question

クライアントから、長方形ではなく四角形のイメージ スライダーを作成するように依頼されました。スライダーはページの途中で終了し、右側のコンテンツと重なってはなりません。この例は次のようになります。

最初の試み

私は現在、境界線を使用して右下隅を切り取るこの JSFiddle デモを作成しました。#intro-bottom-leftこれは、前景と背景の2 つの部分に分かれ#intro-bottom-left-backています (そして、右側に沿って境界効果を作成するもの.

HTML

<section id="intro">
    <div id="intro-bottom">
        <div id="intro-bottom-left-back"></div>
        <div id="intro-bottom-left"></div>
    </div>
</section>

CSS

#intro-bottom-left {
    height: 0;
    width: 0;

    position: absolute;
    top: 0;
    left: 0;

    border-top: 410px solid white;
    border-right: 153px solid transparent;
    border-left: 211px solid white;
}

#intro-bottom-left-back {
    height: 0;
    width: 0;

    position: absolute;
    top: 0;
    left: 0;

    border-top: 410px solid black;
    border-right: 154px solid transparent;
    border-left: 212px solid black;
}

JSFiddle の結果 UI 領域に簡単に収まるように、これをわずかに小さいスケールで作成しました。これにより、次が作成されます。

これがどのように影響を受けないかを示すために、ボディに灰色の背景をどのように与えたかに注意してください.

問題

クライアントは、これが IE8 で動作する必要があると指定しました。これは、 CSS3border-imageプロパティの使用またはCSS3 2D 変換を使用して画像とそのコンテナーを追加または変更することを除外します。

<img />右側の領域を覆わずに、形状の境界の外側にオーバーフローできない要素をこの上に何らかの形で追加する必要があります。コンテナーには、#intro-bottom-left境界線によって作成されるもの以外の幅や高さがないため、画像を追加してコンテナーを指定するだけでoverflow: hiddenは、何も達成されません。

以下のマークアップ ( JSFiddle ) が与えられた場合、適切なコンテンツと重なることなく、この画像を上部の最初の例と同じように表示するにはどうすればよいでしょうか?

<div id="intro-bottom-left">
    <div class="slide">
        <img src="http://placehold.it/500x500" />
    </div>
</div>