重疊多邊形的，Z-index和前/後

Question

我想達到這樣的結果： 這是我有個大氣壓：http://mijnwebsitebestellen.be/index.php

，所以我目前使用SVG元素切片的圖像。您可以在瀏覽器中檢查代碼。由於z-index問題，我無法得到正確的結果。

任何提示或任何形式的例子，讚賞。

Answer 1

您可以使用純CSS實現相同的結果。

• 使用容器元素的背景顏色和圖像
• 使用僞元素::after用白右邊框模仿右邊緣
• 使用相同的類.tile的一些div與transform: skewX(-10deg);模仿條紋並讓他們float: right;

的Et瞧：

.container { 
 
    height: 300px; 
 
    width: 400px; 
 
    background: linear-gradient(rgba(219, 41, 117, 0.6), rgba(219, 41, 117, 0.6)), url(https://i.stack.imgur.com/e11Va.jpg); 
 
    background-size: cover; 
 
    color: white; 
 
    position: relative; 
 
    padding-right: 26px; 
 
} 
 
.container::after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 0; 
 
    width: 0; 
 
    border: none; 
 
    border-left: none; 
 
    border-right: 52px solid white; 
 
    border-top: 300px solid transparent; 
 
    border-bottom: none; 
 
} 
 
.tile { 
 
    width: 30px; 
 
    height: inherit; 
 
    background: rgba(0, 0, 0, 0.6); 
 
    border-left: 5px solid white; 
 
    transform: skewX(-10deg); 
 
    float: right; 
 
}

<div class="container"> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
</div>

當然，你可以添加內容到容器。只需在容器內使用另一個div，並給它適當的寬度。