如何为锯齿状边框容器

Question

您好我试图想出一种方法，将1px的边框添加到带有锯齿状边框的容器中，例如：

https://codepen.io/swizenfeld/pen/ZyBybW

＆＃13;

＆＃13;

body {
  background: #f4f4f4;
}
.edge {
  width: 100%;
  height: 400px;
  background: #fff;
  margin-top: 30px;
}
.edge:before {
    content: " ";
    display: block;
    position: relative;
    width: 100%;
    top:-30px;
    height:30px;
    background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%,
                linear-gradient(-135deg, transparent 75%, white 76%) 0 50%;
    background-repeat: repeat-x;
    background-size: 30px 30px, 30px 30px;
}

＆＃13;

<div class="edge"></div>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

Answer 1

您需要添加更多linear-gradient()以显示锯齿状边框

body {
  background: #f4f4f4;
}
.edge {
  width: 100%;
  height: 400px;
  background: #fff;
  margin-top: 30px;
}
.edge:before {
    content: " ";
    display: block;
    position: relative;
    width: 100%;
    top:-30px;
    height:30px;
    background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, linear-gradient(-135deg, transparent 75%, white 76%) 0 50%, linear-gradient(45deg, red 30%, transparent 0%), linear-gradient(-45deg, red 30%, transparent 0%);
    background-repeat: repeat-x;
    background-size: 30px 30px, 30px 30px;
}

<div class="edge"></div>

对于border-left, -bottom, -right，请尝试使用以下代码段并查看针对css属性的注释。

body {
  background: #ccc;
}
.edge {
  width: 100%;
  height: 400px;
  background: white;
  margin-top: 30px;
  border-left:2px solid red;
  border-bottom:2px solid red;
  border-right:2px solid red;
  position:relative;    /*make it relative*/
}
.edge:after {
    content: " ";
    display: block;
    position:absolute; /*make it absolute*/
    width: 100%;
    top:-6px;  /* play with top and height too*/
    height:23px;
  /*background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, linear-gradient(-135deg, transparent 75%, white 76%) 0 50%, linear-gradient(45deg, red 30%, transparent 0%), linear-gradient(-45deg, red 30%, transparent 0%);*/
    background: linear-gradient(45deg,white 14px, red 16px, transparent 17px), linear-gradient(-45deg, white 14px, red 16px, #ccc 17px);

    background-repeat: repeat-x;
    background-size: 30px 30px, 30px 30px;

}

<div class="edge"></div>