css3 및 html5에서 이미지를 자르는 방법

Question

어느 각도로 왼쪽 및 오른쪽에서 이미지를 잘라내려고합니다. 나는 crip css를 사용했다. 단지 90도 클립 가능

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

좌우로 30도 이상으로 영상을 클립 할 수 있습니다.

Answer 1

CSS mask을 사용할 수 있습니다. 이미지는 직사각형이거나 일부 그라디언트는 직사각형입니다.

그러나 더 효과적인 방법은 포장 div를 사용하는 것입니다. div에 overflow:hidden을 주면서 div 내 이미지를 transform으로 간단히 회전하면됩니다. matrix transforms에 대한 그 http://jsfiddle.net/gK3XL/

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

Answer 2

어떻게 같은?

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