Convert Svg Zigzag border to Css

[asasass]

How would this be done?

code: https://jsfiddle.net/zb3gtxfn/

html {
  height: 100%;
}

body {
  margin: 0;
  background-color: maroon;
  height: 100%;
}

.half {
  height: 100%;
  background-color: red;
  width: 50%;
  background-size: 86.65511265px 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.154"><path d="M1 1.154L0 0.577 1 0" fill="maroon"/></svg>');
  background-repeat: repeat-y;
  background-position: 100% 0;
}

<div class="half"></div>

[PaulOB]

Why do you want to change it? It seems to be working fine.

It’s already CSS so I don’t know what you mean by convert it to CSS?

Is this supposed to be a border just a zigzag down the middle of the page? You never give enough information to supply an answer first time.

You could replicate that zigzag with a linear gradient but unfortunately Chrome leaves some artefacts in the middle of the spike (which I have now tried to fix with a 1px offset) whereas Firefox is perfect.

However it’s more code than the svg version of yours.

As I said I don’t know what your use case is and why what you have already is not good enough?

[asasass]

In regards to the svg version, would there be a way to make both side’s width equal to each other?

The left side seems shorter than the right.

code: https://jsfiddle.net/v7zdbc28/

[PaulOB]

Have you tried increasing the 50% width?

[ronpat]

suggestions:

FIRST

I’m sure that you have been told no less than a thousand times that pixel values with decimals (fractional values) cannot be displayed literally and typically cause different browsers to display “differently” (buggy).
ESPECIALLY when playing with someone else’s code, DUMP the decimal values!
Instead of background-size: 86.65511265px
use background-size: 86px

In this case, it eliminates the Chrome vertical line display problem.

NEXT

You didn’t show us how you changed that width value in response to @PaulOB’s suggestion so here’s mine:

.half {
    width:calc(50% + 43px); 
}

Why add 43px ?
43px is half of the px width of the zig-zag pattern (after deleting the problematic decimals).

  background-size: 86px 100px; /* width of bg size   height of bg size */

That will place the zig-zag pattern exactly in the middle of the window. (left - middle - right)