Salut,
un hexagone est constitué de triangles équilatéraux, dont la longueur (L) est celle du côté de l'hexagone. La longueur du pavage (de la répétition des hexagones) sur l'axe horizontal est donc de 3L (1x en diagonale de l'hexagone 0,0 + 1x le côté de l'hexagone 0,-1 + 1x en diagonale de l'hexagone 1,-1). La longueur du pavage sur l'axe vertical est donc de 2xH, H étant la hauteur du triangle équilatéral (donc, L² = H² + (L/2)² => H = sqrt(L² - L²/4) = L*sqrt(3)/2) => donc la longueur verticale est de L * sqrt(3)
Sinon, pour respecter les axes que tu demandes (je les trouve vraiment pas pratiques perso?! pourquoi ne pas garder les axes verticaux et horizontaux de l'écran, qui seront alors simplement orthogonaux mais non-normés?), il faut (X/Y sont des vecteurs exprimés en [horizontal ; vertical] donc en [left;top]):
X = [L + L/2, H] = [1.5*L, sqrt(3)/2*L]
Y = [-L - L/2, H] = [-1.5*L, sqrt(3)/2*L]
L'hexa [-1, -3] en bas à gauche de l'image devrait donc être en left=1.5*L*-1 + -1.5*L*-3 = 3*L et top=-(sqrt(3)/2*L*-1 + sqrt(3)/2*L*-3) = 2*sqrt(3)*L
Le "-" de top vient de l'axe vertical dirigé "vers le bas" sur l'écran (alors que tu l'as dirigé vers le haut sur le schéma)
A partir de là, tu devrais pouvoir faire ton pavage en CSS
un hexagone est constitué de triangles équilatéraux, dont la longueur (L) est celle du côté de l'hexagone. La longueur du pavage (de la répétition des hexagones) sur l'axe horizontal est donc de 3L (1x en diagonale de l'hexagone 0,0 + 1x le côté de l'hexagone 0,-1 + 1x en diagonale de l'hexagone 1,-1). La longueur du pavage sur l'axe vertical est donc de 2xH, H étant la hauteur du triangle équilatéral (donc, L² = H² + (L/2)² => H = sqrt(L² - L²/4) = L*sqrt(3)/2) => donc la longueur verticale est de L * sqrt(3)
Sinon, pour respecter les axes que tu demandes (je les trouve vraiment pas pratiques perso?! pourquoi ne pas garder les axes verticaux et horizontaux de l'écran, qui seront alors simplement orthogonaux mais non-normés?), il faut (X/Y sont des vecteurs exprimés en [horizontal ; vertical] donc en [left;top]):
X = [L + L/2, H] = [1.5*L, sqrt(3)/2*L]
Y = [-L - L/2, H] = [-1.5*L, sqrt(3)/2*L]
L'hexa [-1, -3] en bas à gauche de l'image devrait donc être en left=1.5*L*-1 + -1.5*L*-3 = 3*L et top=-(sqrt(3)/2*L*-1 + sqrt(3)/2*L*-3) = 2*sqrt(3)*L
Le "-" de top vient de l'axe vertical dirigé "vers le bas" sur l'écran (alors que tu l'as dirigé vers le haut sur le schéma)
A partir de là, tu devrais pouvoir faire ton pavage en CSS