CODEWITHSUNDEEP
htmlcss
fightstarr20
fightstarr20

Reputation: 12628

CSS Clip - Allow background to show through

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..

enter image description here

So as I scroll down, the blue background then shows through. Can anyone show me what I am doing wrong?

Upvotes: 0

Views: 136

Answers (2)

Artvader
Artvader

Reputation: 958

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;
}

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274384

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>

Upvotes: 1

Related Questions