Triple'菱形'圖像拆分CSS

Question

我正在嘗試重新設計網站主頁。 如何將當前正在使用的全屏幕背景圖片分割成3個部分，每個部分與圖片只在菱形形狀中顯示之間存在差距？

我環顧四周，找到了CSS + HTML來創建與圖像裏面的菱形，但它是整個圖像，只有這些菱形形狀之一。

.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>

什麼是當前顯示的視圖可以看出你可以這樣做只是通過利用在它有三個菱形更復雜的剪輯路徑here

Answer 1

的一種方式。有一些工具可以幫助您「繪製」所需的路徑併爲您生成CSS，http://bennettfeely.com/clippy/是我能找到的，但似乎還有更多。

基本上，你希望你的路徑有點定位，看起來你創建了三種不同的形狀，即使它只是一個剪輯。

.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/ 有什麼我能「畫」來創建這樣的效果快速而凌亂的演示。