How do I make a diagonal grid/flexbox? [duplicate] - html

Question

I asked this question earlier asking how to skew an assortment of images. I was able to get very satisfying results
.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;
}
<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>
While my this snipped of code is lengthy compared to the answered one from the other thread, it allows me to resize for each picture I input.
What I am trying to do now is to have the far left end box1 and the far right end box6 of this container environment to skewed only in the inner portion of this assortment. It is kind of like the result this poster is wanting to get: Skew one side only of an element.
I have been attempting several methods of this for a couple hours and I do not to seem to have luck altering box1 and box6 To have one side skewed while not warping the images.

Answer 1

You can use negative margin for last and first one to hide half the element:
.container {
display: flex;
height: 150px;
margin: 0 30px;
overflow:hidden;
}
.box {
flex: 1;
border: 1px solid;
transform: skew(-25deg);
position: relative;
overflow: hidden;
}
.box:first-child {
margin-left:calc((100% / 5) / -2);
}
.box:last-child {
margin-right:calc((100% / 5) / -2);
}
.box:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-image: var(--i);
background-position: center;
}
<div class="container">
<div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div>
</div>