La réalisation d'une mise en page en tranches en diagonale où divs sont assis côte à côte

Question

Je suis en train de réaliser une mise en page en diagonale comme celui-ci -

Et je suis venu à travers https://bennettfeely.com/clippy/ qui est parfait que je peux utiliser pince -Path: polygone créer ma forme, seule chose est le support sur ce n'est pas génial (ne fonctionne pas du tout IE). J'ai essayé de trouver des polyfills mais pour l'instant, je ne trouve rien qui fonctionne correctement.

Chaque section en diagonale sera un teaser d'article que le client mettra à jour afin qu'une image et du contenu lui soient associés.

J'ai créé un fiddle où je suis actuellement en train d'utiliser clip-path: polygon - https://jsfiddle.net/pfx3Lxj3/ - mais je me demande si quelqu'un a d'autres recommandations sur la façon dont je peux faire fonctionner ça au moins IE10 et en haut Tous les autres navigateurs semblent être bien.

<div class="section"> 
    <div class="grid poly--holder"> 
    <div class="poly-item"></div> 
    <div class="poly-item"></div> 
    <div class="poly-item"></div> 
    <div class="poly-item"></div> 
    </div> 
</div> 

Answer 1

Vérifiez ce que vous pouvez utiliser la propriété skew, Soutien à cela dépend bien sûr de la transition CSS3/transformer le soutien du navigateur, si vous cherchez à IE9 et jusqu'à

il fonctionne

.grid { 
 
    box-sizing: border-box; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.poly--holder { 
 
    overflow: hidden; 
 
} 
 
    
 
.poly--holder .poly-item { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    transform: skewX(-10deg); 
 
    -moz-transform: skewX(-10deg); 
 
    -webkit-transform: skewX(-10deg); 
 
    background: blue; 
 
    width:35%; 
 
    height: 400px; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(1) { 
 
    z-index: 4; 
 
    margin: 0 0 0 -10%; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(2) { 
 
    z-index: 3; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(3) { 
 
    z-index: 2; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(4) { 
 
    z-index:1; 
 
    margin: 0 -10% 0 0; 
 
} 
 

 
.poly--holder .poly-item:nth-of-type(odd) { 
 
    background: green; 
 
}

<div class="section"> 
 
    <div class="grid poly--holder"> 
 
    <div class="poly-item"></div> 
 
    <div class="poly-item"></div> 
 
    <div class="poly-item"></div> 
 
    <div class="poly-item"></div> 
 
    </div> 
 
</div>