Container With Zigzag Border At Bottom Only Apply To The Border

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

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

Solution 2:

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) -13px100%,
    linear-gradient(45deg,transparent 50%, grey 50%,grey calc(50% + 3px),transparent 0) 6px100%;
  background-size:40px20px;
  background-repeat:repeat-x;
}

body {
 background:pink;
}

<divclass="container"></div>