問題

各コーナーの次数がわかっている場合、cssで四辺形を作成するにはどうすればよいですか。

私はすでに、変換とスキューを使用して、持っている四辺形を再現しようとしました。

ただし、これは実際にはうまく機能しません。

これは私がアーカイブしようとしているものです。

enter image description here

正確な要件は次のとおりです。

これを背景として1色のdiv。画像には下書き線があります。これらの角度を持つ中実の四辺形である必要があります。

これが私の最初のアイデアでした:

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

  ベストアンサー

要素の幅/高さを見つける必要がある場合、これを実現するために複数の背景を検討します。あなたのイラストに基づいて、私たちはこれを持っています:

enter image description here

これから、次の式を得ることができます。

 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 (正方形)から始めて、次のように回転します。

enter image description here

横からの眺めです。緑は回転した要素で、赤は最初の要素です。回転を実行した後に高さ 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> 

  同じタグがついた質問を見る

csscss3css-transformscss-shapes