How to create polygonal shapes right next to each other in CSS - html

Question

I have created a polygon triangle and I want to stack them next to each other
I have used shape-outside however it does not seem to be working.
I want this to be dynamic so more can be added without the need to change the code
div:nth-child(odd) {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
float: left;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
}
div:nth-child(even) {
width: 280px;
height: 280px;
background: #1e90ff;
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
float: left;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
shape-outside: polygon(50% 100%, 0 0, 100% 0);
left: -137px;
}
div {
position: relative;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 1

Simply adding margin-right: -274px; to div:nth-child(even) does the trick.
div:nth-child(odd) {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
float: left;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
}
div:nth-child(even) {
width: 280px;
height: 280px;
margin-right: -274px;
background: #1e90ff;
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
float: left;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
shape-outside: polygon(50% 100%, 0 0, 100% 0);
left: -137px;
}
div {
position: relative;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

You could use the pseudo selector of
:nth-child(even)
in order to select all 'even' elements.
I haven't used the clip-path (due to browser compatibility issues), so this wouldn't be the cleanest, but this (should) work on more browsers:
.parent {
height: 100px;
width: 100px;
margin: 2px;
display: inline-block;
position: relative;
overflow: hidden;
margin-left: -50px;
}
.parent:nth-child(odd) {
top: -50px;
}
.parent:first-child {
margin-left: 0;
}
.parent:nth-child(odd) .child {
position: absolute;
bottom: 0;
left: 0;
background: tomato;
height: 70%;
width: 70%;
transform: rotate(45deg);
transform-origin: bottom left;
}
.parent:nth-child(even) .child {
position: absolute;
top: 0;
left: 0;
background: tomato;
height: 70%;
width: 70%;
transform: rotate(-45deg);
transform-origin: top left;
}
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>

Answer 3

I have fixed your css quickly (so pardon mistakes) , now they are aligning next to each other and you can add how many you want and they will alignt as long as there is space.
div:nth-child(odd) {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
/* float: left; */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
margin-left: -141px;
}
and
div:nth-child(even) {
width: 280px;
height: 280px;
background: #1e90ff;
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
/* float: left; */
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
shape-outside: polygon(50% 100%, 0 0, 100% 0);
/* left: -137px; */
margin-left: -141px;
}
and
body:nth-child(1){
margin-left:0; /* To clear the first marign */
}