底部有锯齿形边框的容器仅适用于边框

我试图制作一个底部有锯齿形边框的容器，如下所示：

我尝试了这个，但我不知道如何获取底部灰色背景的突袭，我只希望边框像图像一样是灰色的，任何人都可以帮忙吗？ :

https://jsfiddle.net/umw8yh21/1/ https://jsfiddle.net/umw8yh21/1/

HTML :

<div class="myform">
   <div class="myformMain">Content</div>
   <div class="myformFooter"></div>
</div>

CSS :

.myform{
      border: 4px solid lightgrey;
    border-bottom: none;
}
.myformMain {
  height: 200px;
    padding: 36px 0;
    box-sizing: border-box;
    background-color: white;
}
.myformFooter:after{
content: " ";
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 36px;
    background: linear-gradient(white 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, white 33.33%) 0 0%;
    background: -webkit-linear-gradient(white 0%, transparent 0%), -webkit-linear-gradient(135deg, #d9d9d9 33.33%, transparent 33.33%) 0 0%, #d9d9d9 -webkit-linear-gradient(45deg, #d9d9d9 33.33%, white 33.33%) 0 0%;
    background: -o-linear-gradient(white 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, white 33.33%) 0 0%;
    background: -moz-linear-gradient(white 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, white 33.33%) 0 0%;
    background: -ms-linear-gradient(white 0%, transparent 0%), -ms-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -ms-linear-gradient(45deg, #272220 33.33%, white 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 47%, 14px 41px, 14px 42px
}

编辑：其他类似的答案并不完全是我想要的，我已经检查过它们，我需要一种方法使具有相同大小的边框呈之字形，不使用任何 svg/png 或纹理，仅使用 css。

你可以使用SVG作为底部重复的背景non-scaling-stroke属性集

    div {
      width: 50%;
      height: 180px;
      border: 4px #ededed solid;
      border-bottom: 0;
      background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg"><path d="M -15 110 L100 10 L215 110" fill="none" stroke="%23ededed" stroke-width="4" vector-effect="non-scaling-stroke"/></svg>');
      background-position: bottom left;
      background-size: 10% auto;
      background-repeat: repeat-x;
    }

<div></div>

只需为边框宽度和边框选择相同的值即可stroke-width的属性path.

如果您需要用文本填充此元素，请记住在底部添加一些空间（例如使用padding-bottom) 所以内容不会与该行重叠。

另外值得注意的是，该属性vector-effect="non-scaling-stroke"将阻止缩放路径，因此您甚至可以无缝地将此背景应用于响应式元素（否则正常边框将保持固定宽度，而SVG路径会缩放）例如

Codepen 演示 https://codepen.io/anon/pen/eqyXje

此外，如果您愿意，还可以通过更改background-size在某些给定的媒体查询中，例如

@media all and (min-width: 800px) {
  /* 12 background repetitions */
  div { background-size: calc(100% / 12) auto }
}

@media all and (min-width: 1200px) {
  /* 18 background repetitions */
  div { background-size: calc(100% / 18) auto }
}