響應排量傾斜圖像

Question

我試圖創造一些這樣的：

我設法創造這樣的：

，但我似乎無法得到第一個和最後一個圖像是直的

在bootply上的現場示例

這是我的代碼： HTML：

<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> 

CSS：

.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; 
} 

的圖片應採取的頁面寬度的100％

釷anks很多

阿維

Answer 1

感謝所有

這是我如何解決它：

bootply

HTML：

<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> 

CSS：

.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); 
     } 
    } 

個

JS：

$(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"); 
    }); 
}); 

Answer 2

您可以使用clip-path切斷第一和最後一個圖像的角度：

CSS：

.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%); 
} 

HTML：

<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> 

直播示例在這裏：http://www.bootply.com/8uqV7aNEbo。