I need to remove a little space between my divided blocks - html

Question

There is a little space between my two divided blocks.
https://i.imgur.com/l411V0t.png here you can see my problem. I've can’t figure out why the blocks act like this.
body, main {
width: 100%;
margin: 0;
background: black;
}
.container {
display: block;
height: 200px;
margin: auto;
}
.block {
width: 100%;
height: 100%;
background:
linear-gradient(-135deg, transparent 45px, wheat 0) top right,
linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
background-size: 100% 50%;
background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>

Answer 1

In Firefox there is no gap to be found, in Edge and IE it shows so it seems to be a sizing issue. Increasing the background size to 51% closes the gap also in Edge.
I'll try to find how the different browsers calculate background sizes.
body, main {
width: 100%;
margin: 0;
background: black;
}
.container {
display: block;
height: 200px;
margin: auto;
}
.block {
width: 100%;
height: 100%;
background:
linear-gradient(-135deg, transparent 45px, wheat 0) top right,
linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
background-size: 100% 51%;
background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>

Answer 2

Interesting question, while when the container height is set to even number pixel, the line will be removed. When the container height is odd pixel, the line will be displayed.
The key factor should be background-size: 100% 50%; , so you could use scss round function to skip the rounding problem here.