删除内联剪辑路径 div 之间的空间

Question

我已经制作了三个内联 div，每个都有一个图片和标题。标题和图像都使用 css 剪辑路径属性。图像和标题被包裹在 .gallery-inner 班级。代码运行良好，但我希望这些 div 之间不要留有空格。

Link to the fiddle

我的 HTML 代码：

<div class="gallery">
    <div class="gallery-inner">
        <img src="http://dummyimage.com/800" class="img-responsive img-slant--1">
        <div class="caption red">
            <h3>Lorem Ipsum Dolor</h3>
        </div>
    </div>
    <div class="gallery-inner">
        <img src="http://dummyimage.com/800" class="img-responsive img-slant--2">
        <div class="caption blue">
            <h3>Lorem Ipsum Dolor</h3>
        </div>
    </div>
    <div class="gallery-inner">
        <img src="http://dummyimage.com/800" class="img-responsive img-slant--3">
        <div class="caption orange">
            <h3>Lorem Ipsum Dolor</h3>
        </div>
    </div>
</div>

我的 CSS 代码：

.img-slant--1{
    -webkit-clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
}
.img-slant--2{
    -webkit-clip-path: polygon(20% 0, 100% 0%, 80% 100%, 0% 100%);
    clip-path: polygon(20% 0, 100% 0%, 80% 100%, 0% 100%);
}
.img-slant--3{
    -webkit-clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
}
.gallery-inner{
    position: relative;
    width: 33.333333%;
    float: left;
}
.gallery-inner img{
    margin: 0;
    padding: 0;
}
.caption {
    width: 100%;
}
.red{
    background-color: #a31d22;
    -webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 80% 1%, 100% 100%, 0% 100%);
}
.blue{
    background-color: #33658a;
    -webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
    clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
}
.orange{
    background-color: #ca5a27;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
h3 {
    margin: 0;
    padding: 60px;
    color: #fff;
}

有什么办法可以去掉.gallery-inner之间的空格？

一张图片将有助于理解我想要什么。这是示例图像：

Answer 1

尝试在您的 CSS 文件中的 .gallery 下方添加此内容：

.gallery-inner:nth-child(2){
  transform: translateX(-75px);
}

.gallery-inner:nth-child(3){
  transform: translateX(-150px);
}

我希望它有所帮助。我确定它有效。