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

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

所以，我是个哑巴，找到了一个简单而优雅的解决办法！我没有裁剪，而是创建了两个伪边框，作为包装器中的分隔符，并使用所需的背景图像，并为每个边框赋予适当的背景颜色。下面是解决方案& 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/