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.

@SumitRidhal Yes I already checked that, my issue is how make the border to be zigzag not just fill the background with. — Emad Dehnavi, Dec 06 '18 at 11:28
Possible duplicate of [CSS Zigzag Border with a Textured Background](https://stackoverflow.com/questions/12031328/css-zigzag-border-with-a-textured-background) — Selvam Elumalai, Dec 06 '18 at 11:28
Possible duplicate of [zigzag border in css left side](https://stackoverflow.com/questions/49322690/zigzag-border-in-css-left-side) — Sumit Ridhal, Dec 06 '18 at 11:29

Fabrizio Calderan · Accepted Answer · 2019-08-06T11:54:49.497

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

Thanks, your answer helped me alot. – Emad Dehnavi Dec 06 '18 at 12:10 — Emad Dehnavi, Dec 06 '18 at 12:10

Temani Afif · Answer 2 · 2018-12-06T11:36:18.860

You can try like below:

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

Container with zigzag border at bottom only apply to the border

2 Answers2

Linked