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

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

Answer 2

这是使用渐变且无需复杂计算即可实现的简单方法：

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;
}

如何将45deg元素调整为视口边界的大小

2 个答案: