cropping a photo using css - html

Question

I need to crop quadrilateral for a photo. I need parallelogram. But it is skewed. I need a parallelogram crop. How can I do it?
Code is below:
img {
transform: skew(-10deg);
position:relative;
left: 30px;
}
<img src="http://blogs.villagevoice.com/runninscared/RL%20Gang%20Boy.jpg">
What i want is i dont want boy to turn sideways but only the picture to crop. Thank you.

Answer 1

You could use svg's clipPath and foreignObject to apply inline clip-path for maximum browser support.
<svg width="300" height="400">
<defs>
<clipPath id="parallelogram">
<path d="M50,0 h250 l-50,400 h-250z" />
</clipPath>
</defs>
<foreignObject clip-path="url(#parallelogram)" width="100%" height="100%">
<img src="http://blogs.villagevoice.com/runninscared/RL%20Gang%20Boy.jpg" />
</foreignObject>
</svg>

Answer 2

please try this css + html script
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>