Css clip-path with no gap in between - css

Question

I am trying to apply clip-path on three items which are aligned next to each other. Since paths are calculating the space between each other based on the non-clipped div shape, there is an unwanted gap. In the code below when I apply the commented styles in .class2 I get a close result of what I want, but then it's no longer responsive. Any other way to get the similar result with a more suitable approach ?
https://codepen.io/SpoyrazY/pen/erbKXx
HTML
<div class="class1">
<h1>1</h1>
</div>
<div class="class2">
<h1>2</h1>
</div>
<div class="class3">
<h1>3</h1>
</div>
CSS
.class1{
background-image:url(https://dummyimage.com/600x400/66ccff/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
text-align: center;
color: white;
}
.class2{
background-image:url(https://dummyimage.com/600x400/66ff66/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0%, 100%);
clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
/*
margin-left: -90px;
margin-right: -90px;
width: 42.7%;
-webkit-clip-path: polygon(12% 0, 100% 0%, 85% 100%, 0%, 100%);
clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
*/
text-align: center;
color: white;
}
.class3{
background-image:url(https://dummyimage.com/600x400/ff99ff/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
text-align: center;
color: white;
}

Answer 1

This happens due to clip-path. you can achieve your result by setting scale in a custom class. so your html will be like this
<div class="class1 block">
<h1>1</h1>
</div>
<div class="class2 block">
<h1>2</h1>
</div>
<div class="class3 block">
<h1>3</h1>
</div>
Add some lines of css
.block {
transform: scale(1.35);
transform-origin: top;
}
working fiddle here