使用css裁剪照片

Question

我需要为照片裁剪四边形。我需要平行四边形。但它是扭曲的。我需要一个平行四边形裁剪。我该怎么办？

代码如下：

＆＃13;

＆＃13;

img {
  transform: skew(-10deg);
  position:relative;
  left: 30px;
}

＆＃13;

<img src="http://blogs.villagevoice.com/runninscared/RL%20Gang%20Boy.jpg">

＆＃13;

＆＃13;

＆＃13;

我想要的是我不希望男孩转身侧身但只想拍照。谢谢。

Answer 1

您可以使用svg的{​​{1}}和clipPath为maximum browser support应用内联foreignObject。

clip-path

Answer 2

请尝试这个css + html脚本

CSS

#graphic {
width: 200px;
height: 100px;
position: relative;
}

#graphic:before { 
content: '';    
position: absolute;
width: 200px;
height: 50px;
z-index: -1;

background-image: url(http://blogs.villagevoice.com/runninscared/RL%20Gang%20Boy.jpg`enter code here`); /* Image is 500px by 500px, but only 200px        by 50px is showing. */
}

HTML

<div id="graphic">lorem ipsum</div>