Is it possible to fill in the background color so there's no white? I am using the clip-path css property in this screenshot

Question

https://i.sstatic.net/sRpxQ.jpg

Codepen: https://codepen.io/yongelee/pen/eVobRd

I want to make the background have no white, so basically have that white space as the color of the next block's background. But unfortunately when I clip-path, the div doesn't change from a rectangle to a trapezoid!

My code (JSX):

<Wrapper>
<HeroBlock>
  <h1>hi</h1>
  <h4>hihi</h4>
</HeroBlock>
<IntroBlock>
  <h1>heyyy</h1>
  <h4>YO??</h4>
</IntroBlock>
<SkillsBlock>
  <h1>Heyy</h1>
  <h4>okkk</h4>
</SkillsBlock>
</Wrapper>

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr;
`
const HeroBlock = styled.div`
  background: skyblue;
  height: 50vh;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
`
const IntroBlock = styled.div`
  background: orange;
  padding-bottom: 100px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
`
const SkillsBlock = styled.div`
  background: red;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
` 

Using styled-components for this.

Answer 1

Simply consider some negative margin like this:

.container {
  display: grid;
  grid-template-columns: 1fr;
}

.hero {
  background: skyblue;
  height: 50vh;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

.intro {
  margin-top: -40px;
  background: orange;
  padding-bottom: 100px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
}

.skills {
  margin-top: -40px;
  background: red;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

<div class="container">
  <div class="hero">
    <h1>Hey</h1>
    <h4>heyy</h4>
  </div>
  <div class="intro">
    <h1>Hii</h1>
    <h4>Yoo</h4>
  </div>
  <div class="skills">
    <h1>One</h1>
    <h4>Noooo</h4>
  </div>
</div>