css trapezoid image transparent cut - html

Question

I want to make a trapezoid image with css. I've already found some code, but i want a code which makes the trapzeoid shape with transparent left border.
So here you can see that, the left border of the image has been cut down. I want to do that with css. Is it possible?
So i want to make the picture with the man. It is a simple picture and i want to cut down the left border. I tried this
<div class="trapezoidImg"></div>
.trapezoidImg
{
position: absolute;
overflow: hidden;
padding: 0;
margin-left: 100px;
display: inline-block;
width:510px;
height:200px;
background:url('http://iskolaujsag.blathy-bp.hu/wp-content/uploads/2009/04/getattachment-2.jpg');
background-position: center;
-o-background-size: 510px;
-moz-background-size: 510px;
background-size: 510px;
}
.trapezoidImg:after
{
content : "";
position : absolute;
z-index : 2;
left : -50%;
width : 145%;
height : 80%;
display : block;
background : rgb(51,51,59);
bottom: -90%;
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
transform: rotate(53deg);
}
and it works but the :after tag must have a color, i want a transparent one, but if i set it transparent, the image wont be cut. And the reason why i dont want to edit the images in a photeditor, is its going to be a slider, and i dont want to edit all of the images.

Answer 1

Without any code and any tips of what you want to do in the end, i can go with this idea of gradient and image mixed in the background of a container.
On each side some content ?
Here is a free interpretation of your unclear question, hopping it will make you give us some info usable.
background:
url(http://i.stack.imgur.com/WJ3MT.png) center no-repeat,
linear-gradient(47deg, tomato 50.1%, transparent 50%) left no-repeat,
linear-gradient(47deg, transparent 50%, #333 50.1%) right no-repeat;