我想從左側和右側以某種角度剪裁圖像。我用過crip css。但我只能在90度內剪輯如何在css3和html5中剪裁圖像
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
是否可以在左右側剪切圖像30度或更多。
我想從左側和右側以某種角度剪裁圖像。我用過crip css。但我只能在90度內剪輯如何在css3和html5中剪裁圖像
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
是否可以在左右側剪切圖像30度或更多。
您可以使用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;
}
什麼?
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);
}
矩陣是不錯的選擇,但我沒有得到我期待的結果。我想從左側剪切圖像,使左右高度相同,但角度會不同,如三角形。我已經嘗試過面具,我知道使用svg是可能的,但是這種方法非常複雜。有沒有簡單的方法可以做到 –
看一看這個http://codepen.io/paul66/pen/turml對於如何一些例子可以做 - 簡短的回答 - 不容易 – Ruskin