クリップパスを使ってdivを別のdivにカットできますか？

Question

私が作成しようとしているのは、他の2つのdivに分割するdivです（上の図と下の図を参照）。

まず、CSSのような形をどのように作成するのか分かりませんでした。発見されたclip path: polygon。今ではシェイプジェネレータを使用するときにシェイプを並べ替えることができますが、別の場所に分割するdivを取得できないという問題があります。私はz-indexを使用しようとしましたが、うまくいきませんでした。

私はマイナスのマージンを使ってdivをヒーローイメージに移動させることができますが、ポリゴンは右に出てこないことはわかっています。

ここはJSFiddle私はスニペットを追加しようとしましたが、私にはあまりにも多くの問題がありました。

特にHTML/CSSはこれです：

<section class="ThreeSteps"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <div class="col-lg-4"> 
      <h2>Decide</h2> 
      <p>Pick</p> 
     </div> 
     <div class="col-lg-4"> 
      <h2>Fundraise</h2> 
      <p>We</p> 
     </div> 
     <div class="col-lg-4"> 
      <h2>Celebrate</h2> 
      <p>Give</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 


.ThreeSteps { 
    margin-top: -20px; 
    background-color: #0066CC; 
    -webkit-clip-path: polygon(0px 325px,1689px 491px,1688px -466px,1px 82px); 
    clip-path: polygon(0px 325px,1689px 491px,1688px -466px,1px 82px); 
    z-index: 1; 
} 

誰もが、私が何をすべきか上の任意の提案がありますか？あなたの時間をありがとう。

Answer 1

私はクリップパスだけで画像にマスクを作成することを見てきました。私はより良いアプローチは、擬似クラスを作成する必要があります：beforeと：after;それらを.ThreeSteps divに絶対配置します。このような

何か：

.ThreeSteps { 
position: relative; 
/*Other Stuffs*/ 
} 

.ThreeSteps::before { 
content: ''; 
width: 100%; 
height: 100px; 
display: block; 
position: absolute; 
top: -115px; 
left: 0; 
background: url('my-triangle-image-top.svg') no-repeat; 
background-size: contain; 
z-index: 2000; 
} 

.ThreeSteps::after { 
content: ''; 
width: 100%; 
height: 100px; 
display: block; 
position: absolute; 
top: 0; 
bottom: -115px; 
background: url('my-triangle-image-bottom.svg') no-repeat; 
background-size: contain; 
z-index: 2000; 
} 

あなたは（Adobe Illustratorのような）一部のベクタイメージエディタを使用することができる場合、あなたは「私の三角形-image.svg」として三角形の画像を保存し、として使用することができます擬似クラスの背景画像：beforeと：after。あなたが傾けない場合は、.pngイメージを使用してください。しかし、この目的にはsvgが最適です。