CSS: Scissor-Cut images layout - html

Question

This is PNG, using PS:
And for images:
See, how it is a kind of a trapezium, qith one side perpendicular, and the other titlted.
How can this layout be made in html/css, so that whatever imaage is forwarded to this div, it is always shown inside the trapezium, and it creates this fine ui.
How to create this kind of a shape in HTML/CSS?
Code after the accepted answer:
<div class="scissor"><img src="1.png" style="width:200px"></div>
and css:
.scissor{
width: 300px;
height: 150px;
background: #FF6100;
position: relative;
}
.scissor:after{
content: '';
position: absolute; top: 100%; left: 0;
width: 0;
height: 0;
border-top: 100px solid #000;
border-right: 300px solid transparent;
display: block;
}
span{
display: inline-block;
width: 80px;
height: 80px;
border: 10px solid #fff;
border-radius: 50%;
position: absolute; top: 40%; left: 50%;
z-index: 1;
transform: translateX(-50%);
}

Answer 1

use pseudo element - :before or :after
div{
width: 300px;
height: 300px;
background: #FF6100 url('http://www.hybworks.co.uk/wp-content/uploads/2015/05/los-angeles-auto-repair-300x300.jpg') no-repeat 0 0;
position: relative;
}
div:after{
content: '';
position: absolute; bottom: 0px; left: 0;
width: 0;
height: 0;
border-top: 150px solid transparent;
border-right: 300px solid #fff;
display: block;
}
span{
display: inline-block;
width: 120px;
height: 120px;
text-align: center;
line-height: 120px;
font-size: 60px;
font-family: 'segoe ui';
color: #fff;
border: 10px solid #fff;
border-radius: 50%;
position: absolute; top: 10%; left: 50%;
z-index: 1;
transform: translateX(-50%);
}
<div>
<span>D</span>
</div>
Example 2 - use svg
<svg width="300" height="200">
<polyline points="10, 10 300, 10 300, 100 10, 200 10, 100 10, 10" stroke-width="1" stroke="rgb(255,97,0)" fill="rgb(255,97,0)">
</svg>