<!-- add in for skewed section dividers -->

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<div class="skew container-fluid">
<div class="container">
  <h1>This is a skewed body</h1>
</div>
</div>



* {
  margin: 0;
  padding: 0;
}

body {
  height: 200vh;
  overflow:hidden;
}


.container {
  height: 15vh;
  background-color: blue;
  position: relative;
}

.skew {
  position: relative;
  
}

.skew::after {
  content: " ";
  display: block;
  background-color: red;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transform: skewy(-2deg);
  transform-origin: 100%;
  bottom: 0;
}
.skew::before {
  content: " ";
  display: block;
  background-color: red;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transform: skewy(2deg);
  transform-origin: 100%;
  top: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.