Как изменить размер элемента 45deg до границ области просмотра

Question

У меня необычная проблема, которую я пытаюсь решить. У меня есть один элемент на моей странице, который я хочу использовать в качестве фона. Я хочу, чтобы он поворачивался на 45 градусов, и независимо от ширины области просмотра, я бы хотел, чтобы левый и правый угол этого квадрата соответственно касались левого и правого края страницы. другими словами, ширина квадрата должна быть чувствительной. Я действительно не знаю, как рассчитать ширину квадрата, чтобы углы не выходили за пределы области экрана. Возможно ли что-то подобное в CSS?

Вот мой код:

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vw;
  transform: translate3d(-50%, -50%, 0);
}

.square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vw;
  background: #000;
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

<div class="container">
  <div class="square"></div>
</div>

Все вместе на jsFiddle: https://jsfiddle.net/y10hkoja/

Answer 1

Вот простой способ добиться этого с использованием градиента и без сложных вычислений:

body {
  background:
    linear-gradient(to top    left ,transparent 49.8%,#fff 50%) top    left,
    linear-gradient(to top    right,transparent 49.8%,#fff 50%) top    right,
    linear-gradient(to bottom right,transparent 49.8%,#fff 50%) bottom right,
    linear-gradient(to bottom left ,transparent 49.8%,#fff 50%) bottom left,
    #000;
  background-size:50vh 50vh;
  background-repeat:no-repeat;
  margin:0;
  height:100vh;
}

Answer 2

Ваш ответ будет включать основную геометрию Пифагора - a^2 + b^2 = c^2.

Поскольку вы вращаете квадрат и хотите, чтобы две точки его квадрата были 100vw, это ваше значение c, поэтому c^2 = 10,000vw.

Но также, поскольку вы имеете дело с квадратом a = b, мы переопределим a как x, чтобы получить формулу 2x^2 = 10,000vw. Упростите до x^2 = 5000vw. Значение тогда x = Sqrt(5000)vw или ~ 70.7106781187vw.

.bg-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70.7106781187vw; /* css can't calc sqrt so use calculator */
  height: 70.7106781187vw;
  transform: translate3d(-50%, -50%, 0);
}

.bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70.7106781187vw;
  height: 70.7106781187vw;
  background: #000;
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

<div class="bg-wrapper">
  <div class="bg"></div>
</div>