[Résolu] Éléments de grille inclinés

Salut tout le monde !
Je crée ce sujet suite à une problématique que je rencontre en voulant adapter une maquette en code. Voici le rendu final que j'aimerais obtenir :


Mon problème est le suivant :
j'ai prévu de faire cette grille à l'aide de CSS Grid Layouts, mais je me demande bien comment placer des éléments inclinés de cette manière dans une telle grille. En effet j'aimerais que les gaps ne soient pas cliquables, et je suis prêt à utiliser des hacks pour arriver au rendu de cette maquette.J'ai pensé à utiliser des formes en SVG pour cacher certaines parties d'images mais je ne peux pas utiliser cette méthode pour masquer une partie d'image qui en recouvre une autre.
En bref, j'ai besoin d'idées et de votre imagination pour hacker le système

Merci d'avance à ceux qui prendront le temps de me lire
Modifié par Myrial (16 Apr 2019 - 13:16)

Wow, merci beaucoup pour ton aide ! Je pense utiliser le SVG, j'aimerais éviter une rotation de mes images et faciliter la maintenance pour des gens qui ne s'y connaissent pas, donc éviter tout formatage préalable des images à intégrer.
Encore merci pour l'exemple ! Je vais voir ce que je peux en faire
Modifié par Myrial (16 Apr 2019 - 14:24)

Merci de partager un tel message avec nous, il sera bénéfique pour tout le monde, c’est un des meilleurs sites que j’ai visités Je suis impatient de lire plus de blogs post d'ici.

Hello

bien joué Kustolovic, j'ai été confronté à ce genre de design récemment, pour ma part j'ai utilité la propriété css clip-path qui m'a bien rendu service. Pratique pour éviter de passer par du svg.

Certes pas encore compatible Edge, mais ce dernier va passer sous Chromium, testé sur la version Canary ca fonctionne parfaitement.

https://bennettfeely.com/clippy/

Hello,

Pour compléter ce sujet, je viens de tomber sur une ressource tout à fait adaptée :
https://codyhouse.co/blog/post/css-diagonal-containers