:root {
  --width: 300px;
  --height: 100px;
  --top-color: #f44336;
  --bottom-color: #2196F3;
  --vertical-angle: 108.5deg;
  --horizontal-angle: 18.5deg;
}

.separator {
  width: var(--width);
  height: var(--height);
  overflow: hidden;
}

.separator::before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--top-color);
  transform: skewY(calc(-1 * var(--horizontal-angle)));
  transform-origin: bottom left;
}

.separator::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--bottom-color);
  transform: skewY(calc(-1 * var(--horizontal-angle)));
  transform-origin: bottom left;
}

.vertical .separator::before,
.vertical .separator::after {
  transform: skewY(var(--vertical-angle));
}

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

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