如何创建具有特定度数的四边形（菱形形状？

Question

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

我已经尝试过通过变换和偏斜来重新创建四边形。

但是，这不能很好地工作。

这是我尝试存档的内容。

确切的要求是：

具有此颜色的div作为一种颜色的背景。图像上仅是构造线。这些角度应为实心四边形。

这是我的第一个主意：

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之间的比率，而元素的宽度将简单地为[ C0]及其高度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>

以便在视觉上减小高度以保持先前定义的公式。因此，我们以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>

来应用相同的逻辑，以在beta大于rotateY()且alpha小于90deg的情况下更新宽度。在这种情况下，我们将获得45deg，而W < H将无济于事。

数学可以轻松地确认这一点。当rotateX()小于alpha时45deg会小于tan(alpha)，因此1会比1/tan(alpha)大，并且1仅在cos之间定义，因此没有角度可以使用[-1 1]

这里是一个动画来说明：

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

Answer 2

您可以通过各种方式来实现。由于您正在尝试使用度值，因此在这里我可以举一个例子：首先，您可以为矩形取4条线，并根据需要使用度值旋转它们。这是我的意思：

<div class="box">

</div>

<div class="box alt">

</div>

Css

<div class="top_line"></div>
<div class="right_line"></div>
<div class="bottom_line"></div>
<div class="left_line"></div>

.top_line { height: 170px; border-right: 1px solid yellow; transform: rotate(50deg);
  position: absolute; top: 140px; left: 400px; transform-origin: 0% 130%; }
.right_line {height: 140px; border-right: 1px solid red; transform: rotate(130deg);
  position: absolute; top: 140px; left: 500px; transform-origin: 0% 50%; }
.bottom_line { height: 140px; border-right: 1px solid green; transform: rotate(130deg);
  position: absolute; top: 140px; left: 400px; transform-origin: -1800% 80%; }
.left_line { height: 140px; border-right: 1px solid blue; transform: rotate(50deg);
  position: absolute; top: 140px; left: 400px; }