This is the HTML: I have applied an ID to both divs

<div id="herotext">
        <div id="banner"></div>
        <h1 id="maintitle">Hey, I'm Charlie</h1>
        <p>This website contains basic HTML and CSS</p>
    </div>

This is the CSS: I have referenced both divs

#herotext {
    position: absolute;
    text-align : center;
}
#banner {
    position: absolute;
    width: 700px;
    height: 350px;
    transform: skew(20deg);
    background: #555;
    left: 50%;
    margin-left: -15%;
}

CodePudding user response：

Use This code it's flexible code

.container{
  padding: 100px;
}
.box {
  position: relative;
  margin: 100px;
  min-width:400px;
}
.cover {
  background: #555;
  transform: skew(20deg);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index:-1;
}
.text {
  padding:50px
}

<div class="container">
  <div class="box">
  <div class="cover">
  </div>
  <div class="text">
    <h1>Hey, I'm Charlie</h1>
    <p>This website contains basic HTML and CSS</p>
  </div>
</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Check this code one of ways to run

.box {
      position: relative;
      padding: 50px;
    }
    .cover {
      width: 400px;
      height: 250px;
      background: #555;
      transform: skew(20deg);
    }
    .text {
      transform: skew(-20deg);
      padding: 50px;
    }

<div class="box">
  <div class="cover">
    <div class="text">
      <h1>Hey, I'm Charlie</h1>
      <p>This website contains basic HTML and CSS</p>
    </div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>