<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.