css - 如何将45deg元素调整为视口(viewport)边界

我有一个异常的问题，我正在努力解决。我页面上有一个要用作背景的元素。我希望将其旋转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/

最佳答案

您的答案将涉及基本勾股几何-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>