Разделить страницу двумя цветами по диагонали

Question

Как можно разделить страницу двумя цветами по диагонали так, чтобы это было адаптивно?

.red,
.black {
  width: 100%;
  height: 50vh;
}

.red {
  background-color: red;
}

.black {
  background-color: black;
}

<div class="red"></div>
<div class="black"></div>

Answer 1

Самый простой вариант, например, SVG:

body, html { margin: 0; padding: 0; height: 100%;}
svg {display: block; width: 100%; height: 100%; background: red;}

<svg viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" />
</svg>

Answer 2

body {
  background-color: #000;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  background-color: #f00;
}

Answer 3

Самым простым способом будет

div {
  height: 300px;
  background: linear-gradient(to top left, black 50%, red 50%);
}

<div></div>

Answer 4

Можете ставить на сайт фоном, всё будет классно работать.
Также можно написать в переменной --bgColorOpacity цвет который ляжет на этот background.

body,
html {
  height: 100%;
}

body {
  margin: 0;
}

:root {
  --bgColorOpacity: rgba(0, 0, 0, 0.5);
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--bgColorOpacity), var(--bgColorOpacity)), linear-gradient(to top left, black 50%, red 50%);
}

БЛОГ НА HUSL

Разделить страницу двумя цветами по диагонали

Ответы (4 шт):