如何在css3和html5中剪裁图像

Question

我想从左侧和右侧以某种角度剪裁图像。我用过crip css。但我只能在90度内剪辑

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

是否可以在左右侧剪切图像30度或更多。

Answer 1

您可以使用css mask，带有矩形图像或具有看起来像矩形的某种渐变。

但更高效的方法是使用包装Div，并简单地旋转div内的图像使用transform，同时给你的div。类似的东西http://jsfiddle.net/gK3XL/

img { 
    -webkit-transform : rotate(45deg); 
    margin: -30px; 
} 
div { 
    -webkit-transform : rotate(-45deg); 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 

Answer 2

约 matrix transforms

什么？

HTML：

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

CSS：

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

http://codepen.io/raiden-dev/pen/fnjHb?editors=110