如何在css3和html5中剪辑图像

我想剪辑的图像，从左，右的角度有一定程度的。我使用了crip css。但在这一点上，我只能夹住90度

img 
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

---

是否可以在左右两侧将图像剪裁30度或更高。

您可以使用css

遮罩，将图像设置为矩形，或使用一些看起来像矩形的渐变

但更有效的方法是使用包装Div，并使用
transform
简单地旋转Div内的图像，同时向Div提供
overflow:hidden
。类似的情况

那怎么办

HTML:

看看这个例子，看看如何做到这一点-简短的回答-不容易Matrix是一个不错的选择，但我没有得到我正在寻找的结果。我想从左边剪辑图像，这样左右的高度会相同，但角度会不同。就像tripezium一样。我已经尝试过掩码，我知道在svg中使用它是可能的，但这种方法太复杂了。有什么简单的方法吗
img {
    -webkit-transform : rotate(45deg);
    margin: -30px;
}
div {
    -webkit-transform : rotate(-45deg);
    width: 100px;
    height: 100px;
    overflow: hidden;
}

<div class="container">
    <img src="http://dwnloadwallpapers.com/wp-content/uploads/2014/05/Final-Fantasy-Rikku.jpg">
</div>

body {
  background: black;
}

.container {
  width: 540px;
  margin: 0 auto;
  overflow: hidden;
  transform: matrix(1, 0, 0.6, 1, 0, 0);
}

.container img {
  transform: matrix(1, 0, -0.6, 1, 0, 0);
}