从CSS中的图像裁剪三角形

Question

我们的设计师希望这样做：

但我无法找到一个很好的方法来做这个三角作物：

• 使用:after获取所有宽度并使用某种边框技巧制作三角形
• 使用旋转且白色的大:after元素，但不应隐藏任何其他文字
• 有一些神奇的过滤器，我不知道？
• 使用画布，在JS中裁剪，然后将图像作为base64 url​​加载？ （也许是矫枉过正：D）

您怎么看？

Answer 1

修改：版本2：http://jsfiddle.net/mtaU8/4/适用于更改bg。

这里你去：http://jsfiddle.net/mtaU8/

HTML :(我使用了带背景的div，但您可以轻松使用img元素。）

<div class="container">
    <div class="img"></div>
</div>

CSS :(主要用于设置，但基本上在transform:rotate()内容上使用:after，然后对其进行定位，以便很好地切割您的图片。包含容器中的所有内容并且您已经很高兴。）

.container {
    width: 250px;
    height: 100px;
    position: relative;
    overflow:hidden;
}
.img {
    width: 250px;
    height: 100px;
    background-color: blue;
    position: relative;
}
.img:after{
    content:"";
    position: absolute;
    width: 400px;
    height:125px;
    background-color: white;
    top:90px;
    left:-20px;
   transform: rotate(5deg);
   -moz-transform: rotate(5deg);
   -webkit-transform: rotate(5deg);

}

Answer 2

我建议使用CSS剪辑属性：

.crop {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

剪辑属性的rect值表示将被裁剪的图像部分。这是demo。