Обтравочная маска Дизайн с несколькими формами / элементами

Question

В настоящее время у меня есть этот элемент дизайна для создания. Первоначально я построил его, используя 3 отдельных контейнера с квадратными элементами с независимыми фоновыми изображениями, которые только что вырезаны из дизайна, но это кажется мне очень жестким (нам нужно было бы нарезать и заново создавать новое изображение каждый раз, когда мы хотим изменить его) а также громоздкие. В идеале я хотел бы использовать одно изображение для каждого контейнера элементов, чтобы его можно было легко обновить. Это также экономит на двух ненужных запросах к серверу, которые я поддерживаю!

Просто хотел опросить, чтобы увидеть, есть ли лучший / более динамичный способ сделать это. Думаешь, возможно, с помощью JavaScript? Любая помощь или очки в правильном направлении будет принята с благодарностью. Ниже приведено описание того, как я его сейчас строю. Прилагается фрагмент макета дизайна для справки.

HMTL

<div class="grid-container">
  <div class="grid-1 gi" style="background-image:url(image1.jpg);">Facebook</div>
  <div class="grid-2 gi" style="background-image:url(image2.jpg);">Twitter</div>
  <div class="grid-3 gi" style="background-image:url(image3.jpg);">Instagram</div>
</div> 

CSS

.gi {
  background-position: center center;
  background-size: cover;
  width: 32.333%;
}
.grid-1 {
  margin-right: 1%;
}
.grid-2 {
  margin: 0 1%;
}
.grid-3 {
  margin-left: 1%;
}

Answer 1

Итак, я тупой и нашел простой и элегантный обходной путь! Вместо того, чтобы вырезать, я просто создал две псевдо-границы для сервера в качестве разделителей внутри оболочки с нужным фоновым изображением и дал каждому соответствующий цвет фона. Решение & jsfiddle ниже.

HTML

<div class="social-blocks flex" style="background-image: url(http://localhost:8888/sts-store/wp-content/uploads/2016/01/eric.jpg)">

    <div class="social-block auto-ar oneone flex align-center-center block-1" style="height: 381px;">
        <div>facebook</div>
    </div>
    <div class="pseudo-margin"></div>
    <div class="social-block auto-ar oneone flex align-center-center block-2" style="height: 381px;">
        <div>twitter</div>
    </div>
    <div class="pseudo-margin"></div>
    <div class="social-block auto-ar oneone flex align-center-center block-3" style="height: 381px;">
        <div>instagram</div>
    </div>
</div>

CSS

.align-center-center {
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -o-justifty-content: center;    
}
.flex {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
}
.social-block {
    width: 32.333%;
    overflow: hidden;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 28px;
    font-style: italic;
}
.social-blocks {
    margin-bottom: 2%;
    background-position: center bottom;
    background-size: cover;
}
.social-blocks-bg {
    width: 100%;
}
.pseudo-margin {
    width: 2%;
    background-color: rgb(247,247,247);
}

https://jsfiddle.net/942g38qv/8/