Css剪辑路径之间没有间隙答案

【问题标题】：Css clip-path with no gap in betweenCss剪辑路径之间没有间隙
【发布时间】：2018-05-19 19:33:33
【问题描述】：

我正在尝试将clip-path 应用于三个彼此相邻对齐的项目。由于路径是根据未剪裁的div 形状计算彼此之间的空间，因此存在不需要的间隙。在下面的代码中，当我在.class2 中应用注释样式时，我得到了我想要的接近结果，但是它不再响应。还有其他方法可以用更合适的方法获得类似的结果吗？

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

【问题讨论】：

标签： css clip-path

【解决方案1】：

这是由于clip-path 而发生的。您可以通过在自定义类中设置 scale 来实现您的结果。所以你的html 会是这样的

<div class="class1 block">
    <h1>1</h1>
</div>
<div class="class2 block">
    <h1>2</h1>
</div>
<div class="class3 block">
    <h1>3</h1>  
</div>

添加几行css

.block {
   transform: scale(1.35);
   transform-origin: top;
}

工作小提琴here

【讨论】：