У меня есть два div, первый с зигзагообразной нижней границей, и изображение должно быть на обоих div, изображение всегда идет за зигзагообразной границей.я попробовал свойство z-index, но оно не сработало.может кто-нибудь помочь с этим вопросом?или есть какой-то другой способ нарисовать зигзагообразную границу? заранее спасибо.
#d-wrapper {
background-color: #950051;
}
#d-wrapper * {
margin:0;
padding:0;}
#d-wrapper div.sep {
min-height: 200px;
padding: 32px 0;
}
#d-wrapper div > * {
margin: 0 40px;
}
#d-wrapper .zig-zag-bottom{
margin: 32px 0;
margin-top: 0;
background: #1ba1e2;
padding: 32px 0;
}
#d-wrapper p,
#d-wrapper h1{
font-size:2em;
text-align:center;
color:#fff;
font-family:"PT Sans Narrow", "Fjalla One", sans-serif;
font-weight:900;
text-shadow:1px 1px 0 #1b90e2, 2px 2px 0 #1b90e2, 3px 3px 0 #1b90e2, 4px 4px 0 #1b90e2, 5px 5px 0 #1b90e2;
}
#d-wrapper div.sec-dev p,
#d-wrapper div.sec-dev h1 {
text-shadow:1px 1px 0 #888, 2px 2px 0 #888, 3px 3px 0 #888, 4px 4px 0 #888, 5px 5px 0 #888;
color: #fff;
}
#d-wrapper h1{
font-size:4em;
}
#d-wrapper .zig-zag-bottom:after{
background:
linear-gradient(-45deg, transparent 16px, #1ba1e2 0),
linear-gradient(45deg, transparent 16px, #1ba1e2 0);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 22px 32px;
content: "";
display: block;
width: 100%;
height: 32px;
position: relative;
top:64px;
left:0px;
}
#d-wrapper p{
text-align: center;
}
p {
text-align: center;
}
<div id="d-wrapper">
<div class="zig-zag-bottom">
<h1>Title 1</h1>
<p>Content 1</p>
<img src="https://images.vexels.com/media/users/3/131677/isolated/preview/5517f3c8facf7ff407aaa7752c00e8a5-paintbrush-tool-by-vexels.png" alt="Smiley face" width="160px" height="180px" style="margin-bottom: -150px;">
</div>
<div class="sec-dev">
<h1>Title 2</h1>
<p>Content</p>
</div>