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

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

我试过这个，但我不知道如何获得底部灰色背景的raid，我只希望边界像图像一样是灰色的，任何人都可以在这方面提供帮助：

HTML:

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

---

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

您可以尝试以下方法：

.container{
高度：150像素；
宽度：320px；
边框：3倍纯色灰色；
边框底部：无；
背景：
线性梯度（135度，透明50%，灰色50%，灰色钙（50%+3px），透明0）-13px 100%，
线性梯度（45度，透明50%，灰色50%，灰色钙（50%+3px），透明0）6px 100%；
背景尺寸：40px 20px；
背景重复：重复-x；
}
身体{
背景：粉红色；
}

---

您可以使用

SVG

作为具有

非缩放笔划

属性集的底部重复背景

div{
宽度：50%；
高度：180像素；
边框：4px#eded实心；
边界底部：0；
背景图像：url（'data:image/svg+xml；utf8'）；
背景位置：左下角；
背景尺寸：10%自动；
背景重复：重复-x；
}

---

@SumitRidhal是的，我已经检查过了，我的问题是如何使边界呈之字形，而不仅仅是填充背景。可能重复的可能重复的可能重复的感谢，你的回答对我帮助很大。

.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
}