Triple 'Rhomboid' Image Split CSS

Question

J'essaie de re-concevoir une page d'accueil de site Web. Comment puis-je diviser l'image d'arrière-plan en plein écran en cours d'utilisation en trois sections, avec un écart entre chacune d'elles, l'image n'étant affichée que dans la forme rhomboïdale?

J'ai regardé autour et j'ai trouvé le CSS + HTML pour créer le Rhomboid avec l'image à l'intérieur mais c'est l'image entière et seulement une de ces formes Rhomboid.

.polygon-each { 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 
.polygon-each-img-wrap img { 
 
    margin-bottom: 10px; 
 
} 
 
.polygon-each img { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.polygon-clip-rhomboid { 
 
    -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%); 
 
    clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%); 
 
    -webkit-clip-path: url("#polygon-clip-rhomboid"); 
 
    clip-path: url("#polygon-clip-rhomboid"); 
 
}

<div class="polygon-each"> 
 
    <div class="polygon-each-img-wrap"> 
 
    <img src="/img/rules-bgrnd.png" alt="demo-clip-rhomboid" class="polygon-clip-rhomboid"> 
 
    </div> 
 

 
    <svg class="clip-svg"> 
 
    <defs> 
 
     <clipPath id="polygon-clip-rhomboid" clipPathUnits="objectBoundingBox"> 
 
     <polygon points="0 1, 0.3 0, 1 0, 0.7 1" /> 
 
     </clipPath> 
 
    </defs> 
 
    </svg> 
 
</div>

Une vue de ce qui est actuellement affiché peut être vu here

Answer 1

Une façon vous pouvez le faire est juste en utilisant un chemin de détourage plus complexe qui a trois rhomboïdes en elle. Il y a quelques outils qui vous aident à "dessiner" le chemin que vous voulez et générer le CSS pour vous, http://bennettfeely.com/clippy/ est celui que j'ai pu trouver, mais il semble y en avoir plus. Essentiellement, vous voulez que votre chemin soit positionné de manière à ce que vous ayez l'air de créer trois formes différentes, même s'il s'agit d'un seul clip.

.polygon-each { 
    padding: 10px; 
    text-align: center; 
} 
.polygon-each-img-wrap img { 
    margin-bottom: 10px; 
    width:100%; 
    -webkit-clip-path: polygon(0% 100%, 15% 0, 33% 0%, 18% 100%, 32% 100%, 46% 0, 66% 0, 52% 100%, 68% 100%, 80% 0%, 100% 0%, 91% 100%); 
clip-path: polygon(0% 100%, 15% 0, 33% 0%, 18% 100%, 32% 100%, 46% 0, 66% 0, 52% 100%, 68% 100%, 80% 0%, 100% 0%, 91% 100%); 
} 
.polygon-each img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
} 
img { 
    max-width: 100%; 
    height: auto; 
} 

https://jsfiddle.net/bjc89nkv/ Il y a une démonstration rapide et désordonnée de ce que je pouvais « dessiner » pour créer un tel effet.