html - 如何在 css3 和 html5 中裁剪图像

Question

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

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

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

Answer 1

您可以使用 css mask、矩形图像或一些看起来像矩形的渐变。

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

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