css - 如何切掉容器的一 Angular 而不让内容物溢出？

Question

一位客户要求我创建一个四边形而非矩形的图像 slider 。 slider 在页面的一半处结束，不得与右侧内容重叠。这方面的一个例子是:

第一次尝试

我目前创建了 this JSFiddle demo它使用边框来避开右下角。这分为两部分:#intro-bottom-left这是前景和#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 上工作，这排除了使用 CSS3 border-image property或使用 CSS3 2D Transformations添加或修改图像及其容器。

我需要以某种方式添加 <img />在此之上的元素无法溢出形状边界之外，而不会覆盖右侧的任何区域。作为#intro-bottom-left除了由边框创建的内容外，容器没有宽度或高度，只需在其中添加图像并给容器 overflow: hidden不会有任何成就。

给定以下标记 ( JSFiddle )，我该怎么做才能使此图像显示为与顶部的第一个示例相同而不重叠任何正确的内容？

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

Answer 1

您可以使用 IE 过滤器在 IE8 中实现 CSS3 2D 转换效果。试试这个工具: http://www.useragentman.com/IETransformsTranslator/

更新:下面的 fiddle 在 IE8、Chrome 和 Firefox 中看起来是一样的:

http://jsfiddle.net/myajouri/jjbrn/

您必须通过负边距手动调整定位以补偿 transform-origin 的差异。

body {
    background: #444;
}

#intro-bottom {
    overflow: hidden;
}

#intro-bottom-left {
    width: 500px;
    height: 500px;
    padding-left: 90px;
    margin-left: -90px;
    overflow: hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);

    /* IE8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.3639702342662026, M21=0, M22=1, SizingMethod='auto expand')";
    margin-left: -182px\0/; 
}

.slide {
    width: 500px;
    height: 500px;

    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);

    /* IE8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.3639702342662022, M21=0, M22=1, SizingMethod='auto expand')";
    margin-left: -90px\0/;

}