Html 减少两个剪裁图像之间的间距

我使用剪辑路径剪辑两个图像。结果是

一切都很好，但我想像这样缩小这些图像之间的间距

.clip wrap{
显示：内联；
}
.元素{
-webkit剪辑路径：多边形（0 100%，0 0，100%0，60%100%）；
剪辑路径：多边形（0 100%，0 0，100%0，60%100%）；
}
.要素2{
-webkit剪辑路径：多边形（40%0,100%0,100%100,01100%）；
剪辑路径：多边形（40%0,100%0,100%100,01100%）；
}

只需添加

 margin-right: -50px;

到.元素

更多说明： 您可以为.element右键提供负边距，也可以为.element左键提供负边距2

只需添加

 margin-right: -50px;

到.元素

更多说明：

---

您可以右键给.element一个负边距，或左键给.element一个负边距2

图像之间的距离由它们的容器决定，而不是图像本身

使用第二个容器上的负边距，可以将其移近第一个图像

.clip wrap{
显示：内联块；
边框：1px纯黑；
}
.夹套：第n个孩子（2）{
左边距：-50px；
}
.元素{
-webkit剪辑路径：多边形（0 100%，0 0，100%0，60%100%）；
剪辑路径：多边形（0 100%，0 0，100%0，60%100%）；
}
.要素2{
-webkit剪辑路径：多边形（40%0,100%0,100%100,01100%）；
剪辑路径：多边形（40%0,100%0,100%100,01100%）；
}

---

图像之间的距离由其容器决定，而不是图像本身

使用第二个容器上的负边距，可以将其移近第一个图像

.clip wrap{
显示：内联块；
边框：1px纯黑；
}
.夹套：第n个孩子（2）{
左边距：-50px；
}
.元素{
-webkit剪辑路径：多边形（0 100%，0 0，100%0，60%100%）；
剪辑路径：多边形（0 100%，0 0，100%0，60%100%）；
}
.要素2{
-webkit剪辑路径：多边形（40%0,100%0,100%100,01100%）；
剪辑路径：多边形（40%0,100%0,100%100,01100%）；
}

---

您需要将css片段路径属性应用于包裹元素。然后，这些包裹元素将被绝对定位，一个向左，一个向右。 这些包裹元素位于容器内，容器的with确定包裹元素之间的间距

.clips-container {
  position: relative;
  width: 50%;
}
.clip-wrap {
  display: inline-block;
  position: absolute;
}
.clip-wrap1 {
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
  left: 0;
}

.clip-wrap2 {
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  right: 0;
}

我对你的小提琴做了改动，你看：

---

您需要将css片段路径属性应用于包裹元素。然后，这些包裹元素将被绝对定位，一个向左，一个向右。 这些包裹元素位于容器内，容器的with确定包裹元素之间的间距

.clips-container {
  position: relative;
  width: 50%;
}
.clip-wrap {
  display: inline-block;
  position: absolute;
}
.clip-wrap1 {
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%);
  left: 0;
}

.clip-wrap2 {
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  right: 0;
}

我对你的小提琴做了改动，你看：

---

你试过在第二个元素i上使用负数

左边距
吗？大约50px就可以了。请注意，问题中的代码在IE11、Edge或FF中不起作用。它在铬合金中工作。（没有测试Safari。）在iPad上测试。它在Safari中也可以使用。你试过在second elementi上使用负数
左边距
吗？大约50px就可以了。请注意，问题中的代码在IE11、Edge或FF中不起作用。它在铬合金中工作。（没有测试Safari。）在iPad上测试。它也适用于狩猎。