3

客户要求我创建一个四边形但不是矩形的图像滑块。滑块在页面的一半处结束，并且不得与右侧内容重叠。这方面的一个例子是：

示例图像

第一次尝试

我目前创建了这个 JSFiddle 演示，它使用边框从右下角切开。这分为两部分：#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 区域。这将创建：

JSFiddle 第一次尝试

请注意我如何给身体一个灰色的背景，以显示它是如何不受影响的。

问题

客户指定这必须在 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>
4

1 回答 1

0

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

更新： 下面的小提琴在 IE8、Chrome 和 Firefox 中看起来是一样的：

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

您必须通过负边距手动调整定位以补偿变换原点的差异。

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

}
于 2013-10-25T11:31:39.633 回答