ホームページ  >  記事  >  ウェブフロントエンド  >  境界線を使用して三角形の原理を作成する

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

高洛峰
高洛峰オリジナル
2017-02-17 13:36:121535ブラウズ

ウェブサイトのフロントエンドページでは、画像を使用することに加えて、対応する三角形を 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;

実行結果:

利用border制作三角形原理

表示された結果から、境界線の交点が 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;

実行結果:

利用border制作三角形原理

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

コード:

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

実行結果:

利用border制作三角形原理

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

コード:

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

実行結果:

利用border制作三角形原理

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

コード:

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

実行結果:

利用border制作三角形原理

コード:

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

実行結果:

利用border制作三角形原理

コード:

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

ランニング結果:

利用border制作三角形原理

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:CSS 属性 attr()次の記事:CSS 属性 attr()