重複ポリゴンの、Zインデックスと

Question

後、私はこの結果に到達したい/前： は、これは私が気圧持っているものです：http://mijnwebsitebestellen.be/index.php

だから私は、現在画像のスライスするSVG要素を使用しています。ブラウザでコードを調べることができます。私はz-indexの問題のために結果を正しく得ることができません。

あらゆるヒントや例があります。

Answer 1

純粋なCSSを使用しても同じ結果が得られます。

• transform: skewX(-10deg);とストライプを模倣するために、同じクラス.tileのいくつかのdivを使用
• 右端を模倣するために白い右境界と擬似要素::afterを使用
• 背景色と画像のコンテナ要素を使用そして彼らに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を使用して適切な幅を与えます。