Difficult css shape - html

Question

Is it possible to make this shape with a single html element?
I want to use it for cropping images, that's why it would be easier if it was only one element

Answer 1

Is it possible to make that shape using a single element?
YES
div {
width: 80px;
height: 140px;
background: red;
position: relative;
}
div:before,
div:after {
content: "";
display: block;
width: 110%;
height: 60px;
background: white;
position: absolute;
left: -14px;
}
div:before {
transform: rotate(-20deg);
top: -40px;
}
div:after {
transform: rotate(20deg);
bottom: -40px;
}
<div></div>
Note: Some tweaking may need to be done to get it as you want, but you get the idea.
Would I recommend using it for cropping? No. To create this shape the :before and :after elements are white (the background colour) so this would only work if you had a plain background. Its doable but not the best.

Answer 2

Solution 1
If you are looking to use a solid colour background, you could look to use a border on some pseudo elements.
For a quick demo:
div {
background:url(http://lorempixel.com/300/300);
height:300px;
width:300px;
position:relative;
}
div:before, div:after {
content:"";
position:absolute;
left:0;
}
div:before{
top:0;
border-right:300px solid transparent;
border-top:100px solid white;
}
div:after{
bottom:0;
border-right:300px solid transparent;
border-bottom:50px solid white;
}
<div>
</div>
Solution 2
An alternative would be to use perspective and rotation (note. prefixing would be required):
div{
width:200px;
height:200px;
transform:perspective(300px) rotateY(-20deg);
margin-top:50px;
overflow:hidden;
}
<div>
<img src="http://lorempixel.com/300/300"/>
</div>
Alternatives
Further alternatives include:
SVG
Clip-path (although browser support isn't brilliant)