Problem with full screen triangle-half design

Question

I have split the screen into two triangles with another two triangles underneath. The condition is that each triangle must be a div because I want to animate them. It looks like that: https://codepen.io/Robert-Juszczyski/pen/ZEmPMPB
Code from codepen:

<template>
    <div class="white-triangle-bottomleft"></div>
    <div class="white-triangle-topright"></div>
    <div class="gray-triangle-bottomleft"></div>
    <div class="gray-triangle-topright"></div>
</template>
<style>
.white-triangle-bottomleft,
.white-triangle-topright,
.gray-triangle-bottomleft,
.gray-triangle-topright {
  width: 0;
  height: 0;
  top: 0;
  left: 0;
}
.white-triangle-bottomleft {
  display:fixed;
  z-index: 40;
  border-bottom: 100vh solid black;
  border-right: 100vw solid transparent;
}
.white-triangle-topright {
    display:fixed;
  z-index: 40;
  border-top: 100vh solid black;
  border-left: 100vw solid transparent;
}
.gray-triangle-bottomleft {
    display:fixed;
  z-index: 30;
  border-bottom: 100vh solid white;
  border-right: 100vw solid transparent;
}
.gray-triangle-topright {
    display:fixed;
  z-index: 30;
  border-top: 100vh solid white;
  border-left: 100vw solid transparent;
}
</style>

As you can see, there is a line in the middle. Codepen is a little bit bugged, but on my computer it looks like that (You have to open it on full screen to see that line): I found this thread: Full screen triangle-half design but I totally don't know how to implement this code because it's probably jQuery and I have no idea about it. How can i remove that line to make it look good and be responsive? Thanks for any advice.

Thanks for any advice.