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

Question

What I'm trying to create is a div that cuts into two other divs (one above, and one below, see picture below)
First I had no idea how to create a shape like that in css until I discovered clip path: polygon. Now I can sort of get the shape going when using a shape generator, but the problem is I can't get the div to cut into the other places. I tried to use a z-index but that didn't work.
I know I can use a negative margin to move the div more into the hero image but the polygon doesn't come out right.
Here is JSFiddle I tried to add a snippet but was giving me too many issues, figured this would be easier and cleaner to see.
The HTML/CSS in particular is this:
<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;
}
Anyone have any suggestions on what I should do? Thank you for your time.

Answer 1

I've seen that Clip Path just creates a mask on images. I think a better approach should be you create a pseudo-class :before and :after; positioning them absolute to the .ThreeSteps div.
something like this:
.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;
}
If you can use some Vector Image Editor (Like Adobe Illustrator), you can save a triangle image as 'my-triangle-image.svg', and use as a background image on pseudo-classes :before and :after . If you cant, just use a .png image, but svg is the best for this purpose.