如何在 <nav id= "top" > opencart v2.3 中制作波浪形/锯齿形边框

Question

我试图在 <nav id="top"> opencart v2.3中获得波浪/曲折边框。而不是平坦的边界。

类似这样的东西

以下是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

上找到了这一点

全部感谢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>