使用剪辑路径的 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

我看到 Clip Path 只是在图像上创建了一个蒙版。我认为更好的方法应该是创建一个伪 class :before 和 :after;将它们绝对定位到 .ThreSteps 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），您可以将三角形图像另存为 'my-triangle-image.svg'，并在伪classes :before 和：后。如果你不能，就使用 .png 图片，但 svg 是最好的。

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

Can a div using a clip path cut into another div?

html

css

clip-path