Zig Zag border CSS SVG

Question

I am trying to create a zigzag border and have tried a few different ways but am not quite getting there.

Here is a snippet close to what I need, but I need it as a border (top) but the background below the zigzags - is this possible, or is there a different way to do this?

*{
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0; padding: 0;
}

html {
	font-size: 125%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
}

p {
	font-size: 6vw;
}

.wave {
	/* escape character # with %23, duh! */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.01 13"><polyline fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" points="40.01 11.5 30.01 1.5 20.01 11.5 10.01 1.5 0.01 11.5"/></svg>');
	width: 100%;
	background-position: left top;
	background-size: 2.64vw auto; // or 1rem auto;
	background-repeat: repeat-x;
	display: inline-block;
	padding-bottom: 2vw;
	padding:50px;
	background-color:red;
}

<main>
	<!-- learning german is hard -->
	<p><span class="wave">Vergangenheitsbewältigungskultur</span></p>
</main>

Here is what I am aiming for:

I don't think I understand enough about SVGs. I have also looked at border-image but again this is not quite working.

Maybe a way with masks and transforms, as this page states?

Any help is greatly appreciated!

Answer 1

If I were trying to accomplish this:

I would create a portion of zig-zag in a graphics editor (Fireworks, PhotoShop, etc.) with a transparent background.

Then I would add it to a id or class element (of it's own, or include it in the body class) in my CSS file. body {background: #FFF url(path/to/zig-zag) repeat-x;}

And finally, indicate it in my HTML structure. It's either encapsulated in the body tag, or it would be included in a "<div>" tag. The div or body tag should be selected based on where you want the image to appear in relation to the other elements of your page.

(forgive me for not putting this in relation to svg... perhaps I oversimplified it.)

Added: If the point of using SVG is so that the image is responsive/scalable for the different screen sizes (desktop, tablet, phone, etc.), you can include the following line in your CSS file: img { max-width: 100%; height: auto; } If you list it as a stand-alone line, then all of your graphics should have a (simulated) SVG effect.