如何使用 Clip-path 或 skew css 对图像进行对角剪切，使其与示例图像相似，并避免那些空格并加入

Question

如何使用剪辑路径避免剪切中的空白，或者可以使用 CSS 倾斜来做到这一点，或者如何使设计与图像中的图像相似，图像彼此相邻，你能帮忙吗我并告诉我该怎么做

我的CSS代码是这样的：

.cont__imagenes{
display: flex;
}

.img__{
height: 500px;
width: 350px;
object-fit: cover;
}

.corte_inicial{
clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
}

.corte_diagonal{
clip-path: polygon(55% 0, 100% 0, 50% 100%, 0 100%);
}

.corte_final{
clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
}```
    
my html code is this:

    <div class="cont__imagenes">
        <div class="subcont__imagenes">
             <img class="img__ corte_inicial" src="https://source.unsplash.com/random/?winter,night" alt="">
        </div>
        <div class="subcont__imagenes">
               <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?space,night" alt="">
        </div>
        <div class="subcont__imagenes">
             <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?winter" alt="">
        </div>
        <div class="subcont__imagenes">
              <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/900×700/?space" alt="personas">
        </div>
        <div class="subcont__imagenes">
             <img class="img__ corte_final" src="https://source.unsplash.com/random/?montain" alt="">
        </div>
    </div>
    

Answer 1

如果您希望图像彼此相邻，则必须在它们之间创建 50% 的重叠（并且多边形必须为 50% 而不是 55%，否则您会得到不平行的边）：

.cont__imagenes {
  display: flex;
}

.img__ {
  height: 500px;
  width: 350px;
  object-fit: cover;
}

.corte_inicial {
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
}

.corte_diagonal {
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
  rtransform: translateX(-50%);
  margin-left: -175px;
}

.corte_final {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -175px;
}

<div class="cont__imagenes">
  <div class="subcont__imagenes">
    <img class="img__ corte_inicial" src="https://source.unsplash.com/random/?winter,night" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?space,night" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?winter" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/900×700/?space" alt="personas">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_final" src="https://source.unsplash.com/random/?montain" alt="">
  </div>
</div>

如果你想要它们之间有边框，那么不要将它们移动太多，并且有一个可以显示出来的背景：

.cont__imagenes {
  display: flex;
}

.img__ {
  height: 500px;
  width: 350px;
  object-fit: cover;
}

.corte_inicial {
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
}

.corte_diagonal {
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
  margin-left: -170px;
}

.corte_final {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -170px;
}

<div class="cont__imagenes">
  <div class="subcont__imagenes">
    <img class="img__ corte_inicial" src="https://source.unsplash.com/random/?winter,night" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?space,night" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?winter" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/900×700/?space" alt="personas">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_final" src="https://source.unsplash.com/random/?montain" alt="">
  </div>
</div>