How To Offset a DIV By It's Index-CodePudding

I'm trying to create a triangular grid with HTML and CSS which involves offsetting each successive triangle in the grid to the left by larger and larger amounts so that each triangle fits neatly next to the previous one. Since the amount that each triangle needs to move is based on it's index in the parent container, I'm currently using JS to set this offset. I'm looking for a way to do this with pure CSS. Using JS like this feels like a hack and I'm wondering if I'm missing something in CSS that would let me access each triangle div's index or perhaps there's another way altogether in CSS to achieve what I'm doing.

let triangleRows = [...document.getElementsByClassName('triangle-row')]

triangleRows.forEach(row => {
  let children = [...row.children]
  // set each triangle's --tri-index variable to its index
  children.forEach((tri, idx) => tri.style.setProperty('--tri-index', idx))
})

:root {
  --tri-width: 5rem;
  --tri-ratio: 0.86603;
  --offset: -2.25rem
}

.triangle-row {
  display: flex;
  margin-top: 0.2rem;
}

.triangle {
  position: relative;
  height: calc(var(--tri-width) * var(--tri-ratio));
  width: var(--tri-width);
  left: calc(var(--offset) * var(--tri-index));
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.triangle:hover {
  background-color: yellow;
}

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

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

I created the same result with a negative margin. So the triangles don't have to move an increasing space to the left.

:root {
  --tri-width: 5rem;
  --tri-ratio: 0.86603;
  --offset: -2.25rem
}

.triangle-row {
  display: flex;
  margin-top: 0.2rem;
}

.triangle {
  position: relative;
  height: calc(var(--tri-width) * var(--tri-ratio));
  width: var(--tri-width);
  margin-left: var(--offset); /* add the offset */
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle:first-child{
  margin-left: 0;
}

.triangle:hover {
  background-color: yellow;
}

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

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>