<div class="box">
  <div class="aaa">
    <h1>lksdklsdlkdslkdskl</h1>
    <h1>lksdklsdlkdslkdskl</h1>
    <h1>lksdklsdlkdslkdskl</h1>
    <h1>lksdklsdlkdslkdskl</h1>
  </div>
  <div class="tri" aria-hidden="true"></div>
  <div class="bbb"></div>
</div>

.box{
  //position: relative;
}
.aaa{
  height: 50vh;
  background-color: #924646;
  position: sticky;
  top:0;
}
.bbb{
  height: 100vh;
  background-color: firebrick;
  position: relative;
}
.tri {
  margin: 0;
  position: relative;
  transform: rotate(180deg);
}
.tri:after {
  background-color: firebrick;
  clip-path: polygon(0 0, 0 5em, 60em 0px);
  content: '';
  height: 100vh;
  left: -1px;
  position: absolute;
  top: 100%;
  width: calc(100% + 1px);
}