CSS oblique line in the middle of the screen

I am trying to get a oblique line in the middle of the screen and when you hover a part it should grow (which I will know how to make, I guess).

The problem is getting the oblique line in the center of the screen and make it responsive.

This is my current code:

https://jsfiddle.net/kh657fL2/

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>HTML/CSS slicing!</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div class="block block-red">
            Demo
        </div>

        <div class="block block-green">
            Demo
        </div>

        <script src="ui.js"></script>
    </body>
</html>

CSS

html, body {
    margin: 0;
    padding: 0;
    height:100%;
    width:100%;
    overflow:hidden;
}


.block {
    height: 100vh;
    width: calc(50% - 100px);
    position: relative;
}

.block-red {
    background-color:red;
    float:left;
}

.block-green {
    background-color:#00ff00;
    float:right;
}

.block:after {
    position: absolute;
    top: 0px;
    content:'';
    height: 100%;
    width: 200%;
    background: inherit;
}
.block-red:after {
    right: 0;
    transform-origin: bottom right;
    transform: skewX(-20deg);
     z-index: -1;
}
.block-green:after {
    left: 0;
    transform-origin: top left;
    transform: skewX(-20deg);
     z-index: 2;
}

It looks right but it is not responsive on mobile devices - there is a white space between the colors and it is not always in the center of the screen. Please help!