Question

我需要从CMS获取图像并在下一节中使用，并列促销文本（灰色空间），但我不知道如何创建下一个效果： css needed

就像你可以看到的那样，方形从左侧顶部开始，向右侧向下直到右侧，在左侧，反之亦然，我需要的效果。

注意：

来自CMS的原始图片是一个正方形，我需要创建＆＃34; cut＆＃34;如果可能，使用css的效果
解决方案需要与ie9 +，ff，chrome兼容。

Answer 1

我怀疑它是在纯CSS中完成的，它更可能使用具有透明度的背景图像来实现该效果。我已经看过很多情况下使用的剪切效果。

但是，我将创建一个CSS版本并在此处发布，因为非常可能。

以下是使用我刚编程的CSS3属性skew的示例：

http://jsfiddle.net/35s9dk25/7/

可根据您的需要进行调整。

如果有帮助，请将此答案标记为正确。

Answer 2

因为你需要一个背景图片而且我假设你希望文字漂浮在灰色部分上，你需要做的事情与@seanlevan提出的不同。

为了演示目的，我添加了一些背景图片和文字。

/* IE9+ http://caniuse.com/#feat=transforms2d */

* {
    box-sizing: border-box;
}
html, body {
    min-height: 100%;
}
body {
    background-image: url(http://lorempixel.com/output/city-q-c-1200-800-9.jpg);
    background-size: cover;
}


.wrapper {
    padding-top:50px;
    height: 400px;
    overflow: hidden;
    width: 100%;
    max-width: 750px;
    min-width: 500px;
    margin:0 auto;
}
.skew-container {
    position: relative;
    height: 500px;
    overflow: hidden;
    -webkit-transform: skewY(2.5deg);
    -moz-transform: skewY(2.5deg);
    -ms-transform: skewY(2.5deg);
    -o-transform: skewY(2.5deg);
    transform: skewY(2.5deg);
}
.skew-container:before {
    content:'';
    position: absolute;
    right: 50%;
    top: 0;
    left:0;
    bottom:0;
    background-image: url(http://lorempixel.com/output/food-q-c-800-600-3.jpg);
    background-size: cover;
    background-position: bottom left;
    z-index: -1;
}
.skew-container:after {
    content:'';
    position: absolute;
    left: 50%;
    top: 0;
    right:0;
    bottom:0;
    background-color: #ccc;
    z-index: -1;
}
.text {
    width: 50%;
    float: left;
    padding: 2em;
    margin-left: 50%;
    -webkit-transform: skewY(-2.5deg);
    -moz-transform: skewY(-2.5deg);
    -ms-transform: skewY(-2.5deg);
    -o-transform: skewY(-2.5deg);
    transform: skewY(-2.5deg);
}

<div class="wrapper">
    <div class="skew-container">
        <div class="text">
            <h2>San Fran Flatbread &amp; Sauce</h2>
            <p>Bacon ipsum dolor amet picanha pariatur in jowl. Prosciutto tongue cupidatat ex. Rump swine sausage shank ribeye ex minim consequat magna chuck meatball kevin pork chop in. Pariatur minim bacon tongue, sausage ut veniam cupim short loin.</p>
            <a href="#">Get the recipe</a>
        </div>
    </div>
</div>

所以基本上这是如何工作的是，倾斜容器的固定高度比它的包装容器略大。通过向包装器添加一些顶部填充，将其溢出设置为隐藏，您可以向下推动倾斜容器，以便隐藏div的底部，使其平底。

接下来，我使用了两个伪元素来填充容器，但如果您想要更灵活地使用内联样式（example here）动态添加图像，则不必将它们设为伪元素。这些中的每一个都是父偏斜容器的宽度的50％。通过绝对定位，它们可以并排布置。如果z-index为-1，它们将位于文本后面。

最后，您希望通过使用负偏斜值来取消文本div上的偏斜。我给了文本容器50％的宽度，向左浮动并使用50％左边距来抵消它，使其适合右边的灰色区域。

css图像切割背景透明

2 个答案: