CSSトライアングル実装

CSS はフロントエンド開発に不可欠な部分です。植字、レイアウト、スタイルのデザインのいずれにおいても、CSS は必要です。スタイルデザインでは、長方形、円、三角形など、さまざまな形のグラフィックを使用する必要があることがよくあります。三角形の形状を実現することは、CSS の中でも比較的ニッチなテクノロジです。今日は、CSS を使用して三角形の形状を実現する方法について説明します。

1. border 属性を使用して三角形を実装する

CSS の border 属性を使用すると、ボックスの境界線を定義できます。この属性の特性を使用して、三角形の形状を実現できます。具体的な実装方法は次のとおりです。

.triangle {
  width: 0;
  height: 0;
  border-width: 20px 20px 0 20px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

まず、幅と高さが 0 のボックスを定義します。このボックスが三角形です。次に、border-width プロパティを定義し、三角形の下の境界線を幅 20 ピクセル、左右の境界線を幅 20 ピクセル、上の境界線を 0 に設定しました。このようにして、下辺の長さ 40px、高さ 20px の二等辺三角形が得られます。次に、枠線の色を黒、上の枠線の色を透明に設定して、シンプルな三角形が完成します。

2. 疑似クラスを使用して三角形を実装する

上記の方法で実装した三角形は比較的単純ですが、得られるのは二等辺三角形のみです。他の形式の三角形を実装したい場合、または三角形にテキストやアイコンを追加する必要がある場合は、疑似クラスを使用する必要があります。

::before と ::after を使用して、要素の疑似クラス セレクターを拡張できます。これら 2 つの疑似クラス セレクターを通じて、要素内に新しい要素を生成し、新しい要素にスタイルを設定できます。

::before または ::after を使用して三角形を生成し、幅、高さ、境界線のプロパティを設定して三角形の形状を定義できます。同時に、境界線の色とコンテナの色のコントラストを設定して、さまざまなスタイルの三角形を実現することもできます。

.triangle {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #000;
}

.triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 0 20px 20px 20px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
}

上記のコードでは、まず幅と高さが 40 ピクセル、背景色が黒のコンテナーを定義します。次に、::before 疑似クラスを使用して三角形を生成し、三角形の上の境界線を白に設定し、右の境界線、左の境界線、および下の境界線を透明に設定します。三角形の位置は、下と左を設定することで実現されます。

3. clip-path 属性を使用して三角形を実装する

CSS3 では、clip-path 属性を使用して三角形の形状を実装することもできます。 Clip-path 属性は、要素のクリッピング領域を定義し、定義されたパスに従って要素の表示領域をクリップして、さまざまな形状を実現できます。

polygon() 関数を使用して多角形を定義できます。この関数は、無限の数のパラメータを受け入れます。各パラメータは座標値です。座標値には、px、em、rem、またはパーセンテージなどの長さの単位を指定できます。

.triangle {
  width: 0;
  height: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #000;
}

上記のコードでは、まず幅と高さが 0 のボックスを定義し、次に、clip-path 属性を使用してボックスを三角形にクリップします。 Polygon() 関数では 3 点の座標を定義し、これら 3 点を結ぶ線が三角形の 3 辺になります。 3 点の座標は (50% 0%)、(0% 100%)、(100% 100%) で、三角形の頂点と下 2 つの角を表します。

現在のクリップ パス属性の互換性はあまり良くないため、ブラウザの以前のバージョンでこの属性を使用する必要がある場合は、代わりに SVG グラフィックを使用できます。

三角形の形状を実現するには、上記の 3 つの方法を使用できますが、実際のニーズに応じてどの方法を選択するかが異なります。実際の開発では、さまざまな属性とメソッドを組み合わせて、より複雑な三角形のスタイルを実現できます。

以上がCSSトライアングル実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。