Контейнер с зигзагообразной окантовкой снизу относится только к границе

Question

Я пытаюсь создать контейнер с зигзагообразной границей внизу, как показано ниже:

Я пробовал это, но я не знаю, как получитьНалет этого нижнего серого фона, я только хочу, чтобы граница была серой, как на картинке, кто-нибудь может помочь в этом?:

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.

Answer 1

Вы можете использовать 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 demo

Кроме того, если вы хотите, вы также можете изменить количество зизаг, изменив 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 }
}

Answer 2

Вы можете попробовать, как показано ниже:

.container {
  height:150px;
  width:320px;
  border:3px solid grey;
  border-bottom:none;
  background:
    linear-gradient(135deg,transparent 50%,grey 50%,grey calc(50% + 3px),transparent 0) -13px 100%,
    linear-gradient(45deg,transparent 50%, grey 50%,grey calc(50% + 3px),transparent 0) 6px 100%;
  background-size:40px 20px;
  background-repeat:repeat-x;
}

body {
 background:pink;
}

<div class="container">
</div>