How To Offset a DIV By It's Index

March 15, 2022

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 class="triangle-row">
  <div class="triangle"></div>
  <div class="triangle flipped"></div>
  <div class="triangle"></div>
  <div class="triangle flipped"></div>
  <div class="triangle"></div>
</div>
<div class="triangle-row">
  <div class="triangle flipped"></div>
  <div class="triangle"></div>
  <div class="triangle flipped"></div>
  <div class="triangle"></div>
  <div class="triangle flipped"></div>
</div>

>Solution :

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;
  margin-left: calc(var(--offset) * -1); /* fix the negative offset */
}

.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:hover {
  background-color: yellow;
}

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

<div class="triangle-row">
  <div class="triangle"></div>
  <div class="triangle flipped"></div>
  <div class="triangle"></div>
  <div class="triangle flipped"></div>
  <div class="triangle"></div>
</div>
<div class="triangle-row">
  <div class="triangle flipped"></div>
  <div class="triangle"></div>
  <div class="triangle flipped"></div>
  <div class="triangle"></div>
  <div class="triangle flipped"></div>
</div>