Making both side’s svg width equal to each other

The left side seems shorter than the right.

How would I make both sides equal?

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

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>

The light red points reach half way. To make it look half and half the light red must extend further.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.