Twitter bootstrap 位移响应倾斜图像

我正在尝试创建如下内容：

我成功地创建了这个：

但我似乎无法得到第一个和最后一个图像是直的

现场示范

这是我的代码： HTML:

图像应占页面宽度的100%

非常感谢

---

Avi

您可以使用

剪辑路径

以一定角度剪切第一个和最后一个图像：

CSS:

HTML:

这里有一个活生生的例子：。

谢谢大家

我就是这样解决的：

HTML:

JS:

---

非常感谢，但是在较小的设备上，空间是不相等的，看起来你无法轻松控制图像之间的空间

<div class="container">
<div class="col-md-12">
    <div>
        <div class="row">
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item4.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item3.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item2.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item1.png" alt="Image" class="img-responsive"></a></div>
        </div>
    </div>
</div>

.col-xs-3{ 
      transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
      -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
      padding-left: 5px;
      padding-right: 5px;
}

.col-xs-3 {
    padding: 0;
}

.col-xs-3:first-of-type {
    clip-path: polygon(0 0, 100% 0%, 72% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0%, 72% 100%, 0% 100%);
}

.col-xs-3:not(:first-of-type):not(:last-of-type) { 
    position: relative;
    transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
}

.col-xs-3:nth-of-type(2) {
    left: -1.2%;
}

.col-xs-3:nth-of-type(3) {
    left: 1.2%px;
}

.col-xs-3:last-of-type {
    clip-path: polygon(28% 0, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(28% 0, 100% 0%, 100% 100%, 0% 100%);
}

 <div class="container">
        <div class="col-md-12">
            <div>
                <div class="row">
                    <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item4.png" alt="Image" class="img-responsive"></a></div>
                    <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item3.png" alt="Image" class="img-responsive"></a></div>
                    <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item2.png" alt="Image" class="img-responsive"></a></div>
                    <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item1.png" alt="Image" class="img-responsive"></a></div>
                </div>
            </div>
        </div>
    </div>

<div class="container">
<div class="col-md-12 overfh">
    <div>
        <div class="row contec-row">

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item1.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item2.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item3.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item4.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

    .contec-row{
        margin-left: -73px;
        margin-right: -73px;
    }

    .overfh {
        overflow: hidden;
    }

    .contec-col{ 
        transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
        -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
        padding-left: 5px;
        padding-right: 5px;
    }

    .contec-bg {
        width:calc(100% - 23px);
        height:30%;
        position: absolute;
        bottom: 0;
    }
    .contec-content {
        padding-top:5%;
        width:100%;
        height:100%;
        text-align: center;
        vertical-align: middle;
        background:rgba(0,0,0,.75);
        color:white;
        opacity:0;
        transition: opacity .8s ease-in-out;
    }

    .contec-txt{
        transform: translate3d(0, 0, 0) skew(20deg, 0deg);
        -webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
    }

    @media (max-width: 1200px) {
        .contec-bg {
            width:calc(100% - 10px);
        }
    }

    $(document).ready(function(){
     $(".contec-col").mouseover(function(){
      $(this).find('.contec-content').css("opacity", "1");
     });

   $(".contec-col").mouseleave(function(){
       $(this).find('.contec-content').css("opacity", "0");
     });
});