问重写CSS :after /:befor选择器

EN

#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>