css - 如何创建具有特定度数的四边形(菱形)？

Question

当我知道每个 Angular 的度数时，如何使用 css 创建四边形。

我已经尝试通过变换和倾斜重新创建一个四边形。

但是，这并不是很好。

这是我尝试存档的内容。

具体要求是:

以此为背景的一个 div，采用一种颜色。图像上只是构造线。它应该是具有这些 Angular 实心四边形。

这是我的第一个想法:

transform: rotate(-45deg) skew(27.5deg, 62.5deg)
transform-origin: top center;

Answer 1

我会考虑多个背景来实现这一点，我只需要找到元素的宽度/高度。根据您的说明，我们有这个:

由此我们可以得到如下公式:

tan(alpha) = W/H

和

tan(beta/2) = H/W

我们只需要使用其中之一，您会注意到没有一种解决方案是合乎逻辑的，因为您只需要保持 H 之间的比率即可。和 W我们元素的宽度将是 2*W及其高度2*H .

自 H/W也与 2*H/2*W 相同我们可以简单地认为 width = tan(alpha)*height

.box {
  height:var(--h);
  width:calc(1.92098213 * var(--h)); /* tan(62.5)xH */
  background:
   linear-gradient(to bottom right,transparent 49%,red 50%) top left,
   linear-gradient(to top    right,transparent 49%,red 50%) bottom left,
   linear-gradient(to bottom left ,transparent 49%,red 50%) top right,
   linear-gradient(to top    left ,transparent 49%,red 50%) bottom right;
  background-size:50% 50%;
  background-repeat:no-repeat;
}

<div class="box" style="--h:50px;"></div>

<div class="box" style="--h:100px;"></div>

<div class="box" style="--h:200px;"></div>

如果你只想要边框，你可以调整渐变:

.box {
  height:var(--h);
  width:calc(1.92098213 * var(--h)); /* tan(62.5)xH */
  background:
   linear-gradient(to bottom right,transparent 49%,red 50%,transparent calc(50% + 2px)) top left,
   linear-gradient(to top    right,transparent 49%,red 50%,transparent calc(50% + 2px)) bottom left,
   linear-gradient(to bottom left ,transparent 49%,red 50%,transparent calc(50% + 2px)) top right,
   linear-gradient(to top    left ,transparent 49%,red 50%,transparent calc(50% + 2px))  bottom right;
  background-size:50% 50%;
  background-repeat:no-repeat;
}

<div class="box" style="--h:50px;"></div>

<div class="box" style="--h:100px;"></div>

<div class="box" style="--h:200px;"></div>

---

使用transform的思路是依赖rotateX()为了在视觉上降低高度以保持先前定义的公式。所以我们从 Width=height 开始(一个正方形)然后我们像下面这样旋转:

这是侧面图。绿色是我们旋转的元素，红色是初始元素。很明显，我们将看到高度 H1执行旋转后，我们有这个公式:

cos(angle) = H1/H

我们已经有了tan(alpha)=W/H1所以我们会有

cos(angle) = W/(H*tan(alpha)) 

和H=W因为我们最初定义了一个正方形所以我们将有cos(angle) = 1/tan(alpha) --> angle = cos-1(1/tan(alpha))

.box {
  width:150px;
  height:150px;
  background:red;
  margin:50px;
  transform:rotateX(58.63017731deg) rotate(45deg); /* cos-1(0.52056)*/
}

<div class="box">

</div>

我们也可以使用 rotateY() 应用相同的逻辑在 beta 大于 90deg 的情况下更新宽度和 alpha 小于 45deg .在这种情况下，我们将有 W < H和 rotateX()不会帮助我们。

数学可以很容易地证实这一点。什么时候alpha小于 45deg tan(alpha)将小于 1因此1/tan(alpha)将大于 1和 cos仅在 [-1 1] 之间定义所以没有 Angular 我们可以使用 rotateX()

这里有一个动画来说明:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  background:red;
  margin:50px;
  animation:change 5s linear infinite alternate;
}
.alt {
  animation:change-alt 5s linear infinite alternate;
}

@keyframes change {
  from{transform:rotateX(0) rotate(45deg)}
  to{  transform:rotateX(90deg) rotate(45deg)}
}
@keyframes change-alt {
  from{transform:rotateY(0) rotate(45deg)}
  to{  transform:rotateY(90deg) rotate(45deg)}
}

<div class="box">

</div>

<div class="box alt">

</div>