Container with zigzag border at bottom only apply to the border

Question

I trying to make a container which have zigzag border at bottom like below :

I tried this but I don't know how get raid of that bottom gray background, I only want the border to be gray like the image, anyone can help on this? :

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
}

EDIT : Other similar answer is not exactlly what I looking for, I already checked them, I need a way to make the border with same size to be in zigzag shape, not using any svg/png or texture for it, only css.

Answer 1

You could use SVG as a bottom-repeated background with the non-scaling-stroke property set

    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>

Just pick the same value for both the border width and the stroke-width attribute of the path.

If you need to fill this element with text remember to add some room at the bottom (e.g. using a padding-bottom) so the content doesn't overlap the line.

Also it's worth noting that the attribute vector-effect="non-scaling-stroke"will prevent the path to scale so you could seamlessly apply this background even to a responsive element (otherwise the normal border would keep the fixed width, while the SVG path would scale) e.g.

Codepen demo

Furthermore if you wish you could also change the amount of zizag by changing the background-size at some given mediaquery, e.g.

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