style.css

:root {
  --width: 300px;
  --height: 100px;
  --top-color: #f44336;
  --bottom-color: #2196F3;
}

.separator {
  position: relative;
  width: var(--width);
  height: var(--height);
}

.separator::before {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--top-color);

  -webkit-mask-image: url(diagonal.svg#top);
  -webkit-mask-size: cover;

  mask-image: url(diagonal.svg#top);
  mask-size: cover;
}

.separator::after {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--bottom-color);
  -webkit-mask-image: url(diagonal.svg#bottom);
  -webkit-mask-size: cover;

  mask-image: url(diagonal.svg#bottom);
  mask-size: cover;
}

.separator.reverse {
  transform: rotateY(180deg);
}

.vertical .separator.reverse {
  transform: rotateX(180deg);
}