empty-cells

https://webref.ru/css/empty-cells

by Aleksandr Tomashov

HTML

<div class="demo plain">
  <section>
    <header></header>
    <div class="separator"></div>
    <footer></footer>
  </section>

CSS

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

.separator {
  width: 10px;
  height: 0;
  border-style: solid;
  border-width: var(--height) var(--width) 0 0;
  border-color: var(--top-color) var(--bottom-color) transparent transparent;
}

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

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