Entfernen Sie Platz zwischen Inline-Clip-Pfad divs

Question

Ich habe drei Inline-Divs, jeweils mit einem Bild und Beschriftung. Sowohl die Bildunterschrift als auch das Bild verwenden die css clip-path-Eigenschaft. Das Bild und die Beschriftung sind in .gallery-inner Klasse eingewickelt. Der Code funktioniert gut, aber ich möchte keine Leerzeichen zwischen diesen divs behalten.

Link to the fiddle

Mein HTML-Code:

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

Mein CSS-Code:

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

Gibt es eine Möglichkeit, den Raum zwischen .gallery-inner entfernen?

Ein Bild wird helfen zu verstehen, was ich will. Hier ist das Beispiel Bild:

Answer 1

Versuchen das Hinzufügen dieser unter .gallery in Ihrem CSS-Datei:

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

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

Ich hoffe, es hilft. Ich bin sicher, es funktioniert.