如何创建特定程度的四边形（菱形）？ [英] How to create quadrilateral (rhombus shape) with specific degree?

问题描述

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

How can I create a quadrilateral with css, when I know which degree each corner has.

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

I already tried to recreate a quadrilateral I have with transform and skew.

但是，这不起作用

这是我尝试存档的内容。

This is what I try to archive.

确切的要求是：

将div作为背景以一种颜色显示的div。图像上仅是构造线。

A div with this as background in one color. On the image are just construction lines. It should be a solid quadrilateral with these angles.

这是我的第一个想法：

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

推荐答案

我会考虑多种背景来实现这一目标需要找到元素的宽度/高度。根据您的图示，我们有以下内容：

I would consider multiple background to achieve this where I simply need to find the width/height of the element. Based on your illustration we have this:

来自我们可以使用以下公式：

From this we can have the following formula:

tan(alpha) = W/H

和

tan(beta/2) = H/W

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

We only need to use one of them and you will notice that there isn't one solution which is logical as you simply need to keep a ratio between H and W and the width of our element will simply be 2*W and its height 2*H.

由于 H / W 也与 2 * H / 2 * W 相同，因此我们可以简单地认为 width = tan（alpha）*高度

Since H/W is also the same as 2*H/2*W we can simply consider that 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>

如果只需要边框，则可以调整渐变：

You can adjust the gradient if you want only borders:

.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 （一个正方形）开始，然后像下面这样旋转：

Using transform the idea is to rely on rotateX() in order to visually decrease the height to keep the formula defined previously. So we start by having Width=height (a square) then we rotate like below:

这是侧面视图。绿色是我们旋转的元素，红色是初始元素。显然，执行旋转后，我们将看到高度 H1 ，我们有以下公式：

This is a view from the side. The green is our rotated element and the red the initial one. It's clear that we will see the height H1 after performing the rotation and we have this formula:

cos(angle) = H1/H

我们已经有 tan（alpha）= W / H1 因此我们将拥有

And we aleardy have tan(alpha)=W/H1 so we will have

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

并且 H = W 因为我们最初定义了一个正方形，所以我们将有 cos（angle）= 1 / tan（alpha）->角度= cos-1（1 / tan（alpha））

and H=W since we defined a square initially so we will have 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 和小于 45deg 的alpha。在这种情况下，我们将得到 W< H 和 rotateX（）不会帮助我们。

We can also apply the same logic using rotateY() to update the width in the situation where you will have beta bigger than 90deg and alpha smaller than 45deg. In this case we will have W < H and the rotateX() won't help us.

数学可以轻松确认这一点。当 alpha 小于 45deg tan（alpha）时小于 1 ，因此 1 / tan（alpha）将大于 1 和 cos 仅在 [-1 1] 之间定义，因此没有角度可用于 rotateX（）

The math can easily confirm this. when alpha is smaller than 45deg tan(alpha) will be smaller than 1 thus 1/tan(alpha) will bigger than 1 and cos is only defined between [-1 1] so there is no angle we can use with rotateX()

下面是一个动画来说明：

Here is an animation to illustrate:

.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>

这篇关于如何创建特定程度的四边形（菱形）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！