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

Question

我目前有这个设计作品要创作。我最初使用 3 个独立的方形 div 容器构建它，这些容器带有刚刚从设计中剪裁出来的独立背景图像，但这对我来说感觉很僵硬（每次我们想要更改它时，我们都需要切碎并重新制作一个新图像) 以及笨重。理想情况下，我想在每个元素容器中使用一个图像，以便可以轻松更新它。这也节省了两个不必要的服务器请求，我赞成！

只是想调查一下是否有更好/更动态的方法来完成此任务。也许用 javascript 思考？任何帮助或正确方向的点将不胜感激。下面是我目前如何构建它的概要。附上设计模型的sn-p供参考。

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/