境界線を使用して三角形の原理を作成する

ウェブサイトのフロントエンドページでは、画像を使用することに加えて、対応する三角形を CSS の border 属性を使用して作成することもできます。では、境界線を使用して三角形を作成するにはどうすればよいでしょうか?

まず次の例を見てみましょう:

CSS コード:

  width:100px;
  height:100px;
  border-top: solid 100px blue;
  border-left: solid 100px black;
  border-right: solid 100px yellow;
  border-bottom: solid 100px red;

実行結果:

表示された結果から、境界線の交点が 45 度の二等分を形成していることがわかります。次に、要素の幅と高さを 0 に設定するとどうなるでしょうか?

コード:

  width: 0;
  height: 0;
  border-top: solid 100px blue;
  border-left: solid 100px black;
  border-right: solid 100px yellow;
  border-bottom: solid 100px red;

実行結果:

このようにして、4つの正三角形が表示されます。では、必要なのは三角形ですが、どうすればよいでしょうか?想像してみてください。エッジを削除したらどうなるでしょうか?

コード:

  width: 0;
  height: 0;
  border-left: solid 100px black;
  border-right: solid 100px yellow;
  border-bottom: solid 100px red;

実行結果:

今回は、3つの三角形が見えましたが、黒と黄色を透明なものに変更すると、赤いものは1つだけになるでしょうか。三角形の辺は？

コード:

  width: 0;
  height: 0;
  border-left: solid 100px transparent;
  border-right: solid 100px transparent;
  border-bottom: solid 100px red;

実行結果:

明らかに、三角形が表示されます。境界線の幅を変更したり、他の辺を非表示にしたりして、別の三角形を取得することができます。

コード:

  width: 0;
  height: 0;
  border-left: solid 100px transparent;
  border-right: solid 100px transparent;
  border-bottom: solid 50px red;

実行結果:

コード:

  width: 0;
  height: 0;
  border-top: solid 100px transparent;
  border-bottom: solid 100px transparent;
  border-left: solid 150px black;

実行結果:

コード:

  width: 0;
  height: 0;
  border-top: solid 100px transparent;
  border-left: solid 150px black;

ランニング結果:

概要: 1 つまたは 2 つの境界線を削除し、対応する境界線を透明に設定することで三角形を作成できます。これ以上の例はここではリストされません。

ボーダーを使用して三角形を作成する原理に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。