使用剪辑路径的div可以切入另一个div吗？

Question

我想要创建的是一个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），则可以将三角形图像保存为＆＃39; my-triangle-image.svg＆＃39;，并将其用作伪类的背景图像：之前和之后 。如果你不能，只需使用.png图像，但svg最适合这个目的。