2014-07-17 18 views
0

我想從左側和右側以某種角度剪裁圖像。我用過crip css。但我只能在90度內剪輯如何在css3和html5中剪裁圖像

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

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

+0

看一看這個http://codepen.io/paul66/pen/turml對於如何一些例子可以做 - 簡短的回答 - 不容易 – Ruskin

回答

0

您可以使用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; 
} 
0
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

+0

矩陣是不錯的選擇,但我沒有得到我期待的結果。我想從左側剪切圖像,使左右高度相同,但角度會不同,如三角形。我已經嘗試過面具,我知道使用svg是可能的,但是這種方法非常複雜。有沒有簡單的方法可以做到 –