css trapezoid image transparent cut

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;