Estoy tratando de crear una cuadrícula triangular con HTML y CSS, lo que implica desplazar cada triángulo sucesivo de la cuadrícula hacia la izquierda en cantidades cada vez mayores para que cada triángulo encaje perfectamente junto al anterior. Dado que la cantidad que cada triángulo necesita moverse se basa en su índice en el contenedor principal, actualmente estoy usando JS para establecer este desplazamiento. Estoy buscando una manera de hacer esto con CSS puro. Usar JS de esta manera se siente como un truco y me pregunto si me estoy perdiendo algo en CSS que me permitiría acceder al índice de cada triángulo div o tal vez hay otra forma en CSS para lograr lo que estoy haciendo.
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>Creé el mismo resultado con un margen negativo. Entonces los triángulos no tienen que moverse un espacio creciente hacia la izquierda.
: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 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>Editar: implementé la entrada de @Bryce Howitson y eliminé la alternancia de las clases invertidas. El CSS ahora es un poco complejo, pero ahora es fácil incluir más triángulos o más líneas de triángulos.
: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; } .triangle:hover { background-color: yellow; } .triangle:first-child { margin-left: 0; } .triangle-row:nth-child(odd) .triangle:nth-child(odd), .triangle-row:nth-child(even) .triangle:nth-child(even) { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .triangle-row:nth-child(even) .triangle:nth-child(odd), .triangle-row:nth-child(odd) .triangle:nth-child(even){ clip-path: polygon(0% 0%, 50% 100%, 100% 0%); } <div class="triangle-row"> <div class="triangle"></div> <div class="triangle"></div> <div class="triangle"></div> <div class="triangle"></div> <div class="triangle"></div> </div> <div class="triangle-row"> <div class="triangle"></div> <div class="triangle"></div> <div class="triangle"></div> <div class="triangle"></div> <div class="triangle"></div> </div>