各コーナーの次数がわかっている場合、cssで四辺形を作成するにはどうすればよいですか。
私はすでに、変換とスキューを使用して、持っている四辺形を再現しようとしました。
ただし、これは実際にはうまく機能しません。
これは私がアーカイブしようとしているものです。
正確な要件は次のとおりです。
これを背景として1色のdiv。画像には下書き線があります。これらの角度を持つ中実の四辺形である必要があります。
これが私の最初のアイデアでした：
transform: rotate(-45deg) skew(27.5deg, 62.5deg)
transform-origin: top center;
要素の幅/高さを見つける必要がある場合、これを実現するために複数の背景を検討します。あなたのイラストに基づいて、私たちはこれを持っています：
これから、次の式を得ることができます。
tan(alpha) = W/H
そして
tan(beta/2) = H/W
そのうちの1つを使用するだけで、
H
と
W
の比率を維持するだけで、要素の幅が
2*W
になるため、論理的な解決策は1つではないことがわかります。およびその高さ
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>
rotateY()
を使用して同じロジックを適用し、ベータが
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)}
}
<div class="box">
</div>
<div class="box alt">
</div>