Как сделать волнистую/зигзагообразную границу в <nav id = "top"> opencart v2.3

Question

Я пытаюсь получить волнистую/зигзаговую границу в <nav id="top"> opencart v2.3. Вместо плоской границы.

something like this

Ниже приведен код CSS

#top { 
    background-color: #EEEEEE; 
    border-bottom: 1px solid #e2e2e2; 
    padding: 4px 0px 3px 0; 
    margin: 0 0 20px 0; 
    min-height: 40px; 
} 

Answer 1

Я нашел это на CodePen

All thanks to original author on Codepen.io

#d-wrapper { 
 
    background-color: #fff; 
 
} 
 
#d-wrapper * { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#d-wrapper div.sep { 
 
    min-height: 200px; 
 
    padding: 32px 0; 
 
} 
 
#d-wrapper .zig-zag-top:before { 
 
    background: linear-gradient(-45deg, #1ba1e2 16px, red 16px, blue 16px, transparent 0), linear-gradient(45deg, #1ba1e2 16px, transparent 0); 
 
    background-position: left top; 
 
    background-repeat: repeat-x; 
 
    background-size: 22px 32px; 
 
    content: " "; 
 
    display: block; 
 
    height: 32px; 
 
    width: 100%; 
 
    position: relative; 
 
    bottom: 64px; 
 
    left: 0; 
 
} 
 
#d-wrapper div > * { 
 
    margin: 0 40px; 
 
} 
 
#d-wrapper .zig-zag-bottom { 
 
    margin: 32px 0; 
 
    margin-top: 0; 
 
    background: #1ba1e2; 
 
} 
 
#d-wrapper .zig-zag-top { 
 
    margin: 32px 0; 
 
    margin-bottom: 0; 
 
    background: #1ba1e2; 
 
} 
 
#d-wrapper .zig-zag-bottom, 
 
#d-wrapper .zig-zag-top { 
 
    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.sep p, 
 
#d-wrapper div.sep 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; 
 
} 
 
#d-wrapper p:not(:last-child) { 
 
    margin-bottom: 20px; 
 
} 
 
p { 
 
    text-align: center; 
 
}

<div id="d-wrapper"> 
 
    <div class="zig-zag-bottom"> 
 
    <h1>Zig Zag</h1> 
 
    <p>Zig Zag Borders in CSS</p> 
 
    </div> 
 
    <div class="sep"> 
 
    <h1>Zig Zag</h1> 
 
    <p>Zig Zag Borders in CSS</p> 
 
    </div> 
 
    <div class="zig-zag-bottom zig-zag-top"> 
 
    <h1>Zig Zag</h1> 
 
    <p>Zig Zag Borders in CSS</p> 
 
    </div> 
 
    <div class="sep"> 
 
    <h1>Zig Zag</h1> 
 
    <p>Zig Zag Borders in CSS</p> 
 
    </div> 
 
    <div class="zig-zag-top"> 
 
    <h1>Zig Zag</h1> 
 
    <p>Zig Zag Borders in CSS</p> 
 
    </div> 
 
</div>