如何创建具有特定度数的四边形(菱形)?
How to create quadrilateral (rhombus shape) with specific degree?
当我知道每个角的度数时,如何用 css 创建一个四边形。
我已经尝试通过变换和倾斜重新创建一个四边形。
然而,这并不是很好。
这是我尝试存档的内容。
具体要求是:
A div 以此作为单色背景。图像上只是构造线。它应该是具有这些角度的实心四边形。
这是我的第一个想法:
transform: rotate(-45deg) skew(27.5deg, 62.5deg)
transform-origin: top center;
您可以通过多种方式做到这一点。由于您正在尝试使用度值,所以在这里我可以给您举个例子:首先,您可以为矩形取四条线,然后根据需要使用度值旋转它们。这就是我的意思:
<div class="top_line"></div>
<div class="right_line"></div>
<div class="bottom_line"></div>
<div class="left_line"></div>
Css
.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; }
我会考虑多个背景来实现这一点,我只需要找到元素的 width/height。根据您的说明,我们有:
由此我们可以得到如下公式:
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]
之间定义,因此我们无法使用 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>
当我知道每个角的度数时,如何用 css 创建一个四边形。
我已经尝试通过变换和倾斜重新创建一个四边形。
然而,这并不是很好。
这是我尝试存档的内容。
具体要求是:
A div 以此作为单色背景。图像上只是构造线。它应该是具有这些角度的实心四边形。
这是我的第一个想法:
transform: rotate(-45deg) skew(27.5deg, 62.5deg)
transform-origin: top center;
您可以通过多种方式做到这一点。由于您正在尝试使用度值,所以在这里我可以给您举个例子:首先,您可以为矩形取四条线,然后根据需要使用度值旋转它们。这就是我的意思:
<div class="top_line"></div>
<div class="right_line"></div>
<div class="bottom_line"></div>
<div class="left_line"></div>
Css
.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; }
我会考虑多个背景来实现这一点,我只需要找到元素的 width/height。根据您的说明,我们有:
由此我们可以得到如下公式:
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]
之间定义,因此我们无法使用 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>