css倾斜多个元素保持图像和文字直接

Question

我正在努力解决这个问题：我需要将4个元素内联，保持图像和文字笔直，但偏向容器。我尝试了许多不同的解决方案（伪元素，偏斜正负，剪辑路径，ecc。它们使用单​​个图像，但我无法处理多个元素并找到解决方案。我还需要将图像保留为背景图像，因为响应性。

这是我得到的截图：

我需要制作直线图像和文本，将容器中的paralelogram保存在这样的容器中：

这是我的代码：

HTML

<div class="image-front-container" style="height: 199px;">   
    <div class="image-front background-image-formatter fill" style="background-image:url('http://mysite/image1.jpg')">
    </div>
    <a href="/mysite/mypage" class="front-main-anchors"></a>
    <div class="image-front-title"><span>Image 1</span></div>   
</div>

                                       图2                                             图3     

CSS

.image-front-container {
    border: 10px solid transparent;
    width: 25%;
    float: left;
    /*-webkit-transform: skew(-20deg);*/
    /*-moz-transform: skew(-20deg);*/
    /*-o-transform: skew(-20deg);*/
    /*-webkit-clip-path: polygon(0 4%, 95% 0, 99% 100%, 4% 93%);*/
    height: 400px;
}

.image-front {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
    transition: background-image .5s ease-in-out;
    -webkit-transition: background-image .5s ease-in-out;
    -moz-transition: background-image .5s ease-in-out;
}

.image-front-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    -moz-box-shadow: inset 0 30px 0 rgba(0, 0, 0, 0.85);
    -webkit-box-shadow: inset 0 30px 0 rgba(0, 0, 0, 0.85);
    box-shadow: inset 0 30px 0 rgba(0, 0, 0, 0.85);
}

谢谢！