split background with linear gradient

index.css

.responsive-diagonal {
  width: 100%;
  height: 50vh;
  border: 1px solid #d2d2d2ff;
  background: linear-gradient(
    to bottom,
    #f5f5f5 50%,
    #d2d2d2ff calc(50% + 1px),
    #ffffff calc(50% + 1px)
  );
}

index.html

<div class="responsive-diagonal"></div>