CSS Clip - Allow background to show through - html

Question

I am trying to apply css clip to an element to allow the layer behind to show through. I have the following layout..
body, html {
margin:0;
padding:0;
}
.container {
background:lightgray;
}
.clip {
position:fixed;
height:100%;
width:100px;
clip: rect(10px, 100px, 100px, 100px);
}
.section1, .section2 {
height:100vh;
width:100%;
}
.section_left_red {
height:100%;
width:100px;
background:red;
}
.section_left_blue {
height:100%;
width:100px;
background:blue;
}
<div class="container">
<div class="clip">
</div>
<div class="section1">
<div class="section_left_red">
</div>
<div>
<div class="section2">
<div class="section_left_blue">
</div>
<div>
</div>
I am trying to achieve something like this..
So as I scroll down, the blue background then shows through. Can anyone show me what I am doing wrong?

Answer 1

You can probably use multiple background to create this. The idea is to color only a part of the background making the remaining transparent:
body,
html {
margin: 0;
padding: 0;
}
.clip {
position: fixed;
height: 100%;
width: 200px;
box-sizing:border-box;
border:5px solid lightgray;
background:
linear-gradient(lightgray,lightgray) right/50% 100%,
linear-gradient(lightgray,lightgray) bottom/100% 80%;
background-repeat:no-repeat;
}
.section1,
.section2 {
height: 100vh;
width: 100%;
background: red;
}
.section2 {
background: blue;
}
<div class="container">
<div class="clip">
</div>
<div class="section1">
</div>
<div class="section2">
</div>
</div>

Answer 2

I don't believe that clip is the technique that you'll need to achieve this.
Clip css property is meant cut off part of an image that is absolutely positioned. I don't think it's meant for other elements.
instead of clip, have you tried using gradients to create a hole inside? Or maybe even a border:
.clip {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
border-top: 10px solid #fff;
border-left: 10px solid #fff;
border-right: calc(100vw - 60px) solid #fff;
border-bottom: calc(100vh - 60px) solid #fff;
box-sizing: border-box;
}