css梯形图像透明切割

Question

我想用css制作一个梯形图像。我已经找到了一些代码，但我想要一个使trapzeoid形状具有透明左边框的代码。

所以在这里你可以看到，图像的左边框已被削减。我想用css做到这一点。有可能吗？

所以我想和男人合影。这是一个简单的图片，我想减少左边框。我试过这个

<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); 
}

并且它有效但是：after标签必须有颜色，我想要一个透明的，但如果我将它设置为透明，则图像不会被剪切。而我之所以不想在光学家中编辑图像，是因为它将成为一个滑块，我不想编辑所有图像。

Answer 1

在没有任何代码和最终想要做的任何提示的情况下，我可以将这种渐变和图像混合在一个容器的背景中。

每边都有一些内容？

Here is a free interpretation of your unclear question，跳过它会让你给我们一些可用的信息。

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;