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>