具有多种形状/元素的剪裁蒙版设计

Question

我目前正在创作这个设计作品。我最初使用3个独立的方形div容器构建它，其中独立的背景图像刚刚从设计中删除，但这对我来说是一个很大的僵化（每次我们想要改变它时我们需要切割并重新放置一个新图像）以及笨重。理想情况下，我想在每个元素容器中使用一个单独的图像，以便可以轻松更新。这也节省了两个不必要的服务器请求，我赞成！

只是想轮询以确定是否有更好/更有活力的方法来实现这一目标。也许用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

所以，我愚蠢的，找到了一个简单而优雅的解决方法！我只是在服务器中创建了两个伪边框作为分隔符，并在所需的背景图像中给出了每个正确的背景颜色。解决方案＆amp; 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/