css искажает несколько элементов, сохраняя изображения и текст прямыми [дубликаты]

я борюсь с этим: мне нужно поместить 4 встроенных элемента, сохраняя изображение и текст прямыми, но перекашивая контейнер. Я пробовал много разных решений (псевдоэлементы, перекос положительных и отрицательных, путь клипа и т. Д. Они работают с одним изображением, но я не могу обрабатывать несколько элементов и находить решение. Мне также нужно было бы сохранить изображения в качестве фоновых изображений из-за ответная реакция.

Это скриншот того, что я получаю:

Мне нужно сделать прямое изображение и текст, сохраняя параллелограмм в контейнере следующим образом:

Вот мой код:

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>

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

Благодарю вас!