css图像剪切背景透明

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

正如你们所看到的，正方形从左边的顶部开始，向下一点直到右边，在左边我们有一个相反的例子，我需要这个效果

注:

---

• 从CMS的原始图像是一个正方形，我需要创建“削减”效果使用css如果可能的话
• 解决方案需要与ie9+、ff、chrome兼容

---

我怀疑它是在纯CSS中实现的，它更可能使用具有透明度的背景图像来实现这种效果。我在很多情况下都看到了切割效果

然而，我将创建一个CSS版本并发布在这里，因为这是非常可能的

下面是一个使用我刚刚编程的CSS3属性

skew

的示例：

它可以根据您的需要进行调整

---

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

因为您需要背景图像，我假设您希望文本漂浮在灰色部分上，您需要执行与@seanlevan建议的不同的操作

为了演示，我添加了一些背景图像和文本

/*IE9+http://caniuse.com/#feat=transforms2d */
* {
框大小：边框框；
}
html，正文{
最小高度：100%；
}
身体{
背景图片：url(http://lorempixel.com/output/city-q-c-1200-800-9.jpg);
背景尺寸：封面；
}
.包装纸{
填充顶部：50px；
高度：400px；
溢出：隐藏；
宽度：100%；
最大宽度：750px；
最小宽度：500px；
保证金：0自动；
}
.倾斜容器{
位置：相对位置；
高度：500px；
溢出：隐藏；
-webkit变换：歪斜（2.5度）；
-moz变换：歪斜（2.5度）；
-ms变换：歪斜（2.5度）；
-o变换：歪斜（2.5度）；
变换：歪斜（2.5度）；
}
.倾斜容器：在{
内容：''；
位置：绝对位置；
右：50%；
排名：0；
左：0；
底部：0；
背景图片：url(http://lorempixel.com/output/food-q-c-800-600-3.jpg);
背景尺寸：封面；
背景位置：左下角；
z指数：-1；
}
.倾斜容器：之后{
内容：''；
位置：绝对位置；
左：50%；
排名：0；
右：0；
底部：0；
背景色：#ccc；
z指数：-1；
}
.文本{
宽度：50%；
浮动：左；
填料：2米；
左边距：50%；
-webkit变换：歪斜（-2.5度）；
-moz变换：歪斜（-2.5度）；
-ms变换：歪斜（-2.5度）；
-o变换：歪斜（-2.5度）；
变换：歪斜（-2.5度）；
}

圣弗兰扁平面包公司；酱汁
培根·伊普苏姆·多洛尔·埃米特·皮卡尼亚·帕里塔特的下巴。火腿舌尖杯，前臀，猪香肠，香肠，里贝耶，前小吃，麦格纳肉丸，凯文猪排。巴黎迷你培根舌头、香肠和威尼斯丘比特短腰肉

CMS的原始图像是一个正方形，如果可能，我需要使用css创建“剪切”效果。REFIREFOX 35，ie9和10，不支持，只支持chrome:（@seanlevan