style.css

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

.separator {
  --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cpolygon fill="%23f44336" points="0 100 0 0 100 0"/%3E%3Cpolygon fill="%232196F3" points="100 0 100 100 0 100"/%3E%3C/svg%3E');

  width: var(--width);
  height: var(--height);
  background-image: var(--svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.separator.external {
  background-image: url(source.svg);
}

.separator.shadow {
  background-image: url(shadow.svg);
}

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

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

.image.above .separator {
  --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cpolygon fill="%232196F3" points="100 0 100 100 0 100"/%3E%3C/svg%3E');
}

.image.below .separator {
  --svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cpolygon fill="%23f44336" points="0 100 0 0 100 0"/%3E%3C/svg%3E');
}