css - 从CSS中的图像裁剪三 Angular 形

Question

我们的设计师想要这样做:

但是我想不出一个好的方法来做这个三 Angular 形裁剪:

• 使用 :after 获取所有宽度并使用某种边框技巧来制作三 Angular 形
• 有一个很大的 :after 元素，它被旋转并且是白色的，但它不应该隐藏任何其他文本
• 有一些我不知道的魔法过滤器？
• 通过使用 Canvas ，在 JS 中裁剪它，然后将图像加载为 base64 url​​？ (也许矫枉过正 :D)

你怎么看？

Answer 1

编辑:版本 2:http://jsfiddle.net/mtaU8/4/适用于不断变化的背景。

给你:http://jsfiddle.net/mtaU8/

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

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

CSS:(主要用于设置，但基本上在 :after 内容上使用 transform:rotate()，然后定位它，以便它很好地切割您的图片。包含所有这些都在你的容器中，你很高兴。)

.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);

}