Pregunté estopregunta antes preguntaba cómo sesgar una variedad de imágenes. Pude obtener resultados muy satisfactorios

CSS

.container {
    font-size:0;
    height:215px;
    margin: 30px 50px;
    text-align: center;
    color: black;
}
.box1 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 3px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box2 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box3 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box4 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box5 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box6 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}


.box1 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: -100%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box2 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box3 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box4 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  right: -35%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box5 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box6 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  right: -35%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}

HTML

<div class="container">
  <div class="box1"><span style="background-image:url(illustris1.png)"></span></div>
  <div class="box2"><span style="background-image:url(gal.png)"></span></div>
  <div class="box3"><span style="background-image:url(laniakea.jpg)"></span>  </div>
  <div class="box4"><span style="background-image:url(globularstar.jpg)"></span></div>
  <div class="box5"><span style="background-image:url(elliptical.jpg)"></span></div>
  <div class="box6"><span style="background-image:url(illustris2.png)"></span></div>
  <div class="container mid"></div>
</div>

Si bien mi código recortado es largo en comparación con el respondido del otro hilo, me permite cambiar el tamaño de cada imagen que ingreso.

Lo que estoy tratando de hacer ahora es tener el extremo izquierdobox1 y el extremo derechobox6 de estacontainer entorno a sesgado solo en la parte interna de este surtido. Es como el resultado que este póster quiere obtener:Incline solo un lado de un elemento.

He estado intentando varios métodos de esto durante un par de horas y no parece que tenga suerte alterandobox1 ybox6 Tener un lado sesgado sin deformar las imágenes.