Question

我正在尝试创建这样的东西：

我设法创造了这个：

但我似乎无法让第一张和最后一张图片变得直白

上的实例

这是我的代码： 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％

非常感谢

阿维

Answer 1

您可以使用System.Web.Routing.Route以角度剪切第一张和最后一张图片：

CSS：

clip-path

HTML：

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

此处的实例：http://www.bootply.com/8uqV7aNEbo。

Answer 2

全部谢谢

这就是我解决它的方法：

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

取代响应式斜面图像

2 个答案: