インラインクリップパスdivの間のスペースを削除

Question

私は3つのインラインdivを作成しました。それぞれに画像とキャプションがあります。キャプションと画像の両方には、css clip-pathプロパティが使用されます。画像とキャプションは .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の間のスペースを削除することができます方法はありますか？

イメージは私が欲しいものを理解するのに役立ちます。ここでは例としてイメージがある：あなたのCSSファイルに.galleryの下にこれを追加すること

Answer 1

試してみてください。

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

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

私はそれが役に立てば幸い。私はそれが動作すると確信しています。