疑似要素と境界線を使用して完璧な HTML/CSS 三角形を作成するにはどうすればよいですか?

疑似要素を使用した HTML/CSS 三角形の作成

疑似要素を使用して三角形をレンダリングしようとすると、要素の位置を揃える際に問題が発生する可能性があります正しく。これらの問題を解決する鍵は、CSS で枠線がどのように適用されるかを理解することにあります。

提供されたコード スニペットでは、枠線の使用によって問題が発生しています。三角形を作成するには、ベースを形成するために、左右の境界線など、2 つの反対側の境界線が必要です。ただし、下の境界線は要素の全長に沿って適用されるため、歪んだ形状になります。

別のアプローチは、回転と境界線を利用することです。以下に例を示します。

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position: relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}

ここでは、border-top と border-left によって三角形の形状が作成され、rotate() 変換によって形状が三角形に歪められます。位置: 絶対、左および上のプロパティは三角形を正確に揃えます。

境界線と回転の仕組みを理解することで、疑似要素を使用して複雑な形状を効果的に作成できます。

以上が疑似要素と境界線を使用して完璧な HTML/CSS 三角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。