Markdown for separator element

Build an Eye-Catching Non-Rectangular Header Design

header {
  height: calc(var(--height) * 2);
  background-image: url(image.jpg);
  background-size: cover;
  background-position: center bottom;
}

.separator {
  --top-color: transparent;
  margin-top: calc(var(--height) * -1);
  width: var(--width);
  height: var(--height);
  background-image: linear-gradient(to bottom right, var(--top-color), var(--top-color) 50%, var(--bottom-color) 50%, var(--bottom-color));
}

section {
    height: var(--height);
}