<div class="wrap">
  <div class="content">content</div>
  <div class="text">text</div>
</div>
<footer class="footer">footer</footer>
.content {
  height: 2000px;
  background: linear-gradient(
      135deg,
      #708090 21px,
      #d9ecff 22px,
      #d9ecff 24px,
      transparent 24px,
      transparent 67px,
      #d9ecff 67px,
      #d9ecff 69px,
      transparent 69px
    ),
    linear-gradient(
        225deg,
        #708090 21px,
        #d9ecff 22px,
        #d9ecff 24px,
        transparent 24px,
        transparent 67px,
        #d9ecff 67px,
        #d9ecff 69px,
        transparent 69px
      )
      0 64px;
  background-color: #708090;
  background-size: 64px 128px;
}
.text {
  position: sticky;
  bottom: 0;
  background: tomato;
  height: 50px;
}
.footer {
  background: navy;
  height: 150px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.