CSS を使用して三角形を実装する一般的な手法 (複数の方法)

面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法について質問されますが、一般的な答えは通常、境界線のみを使用して描画することです。

CSS は今日まで発展を続けており、CSS のみを使用して三角形を描く興味深い方法が実際にたくさんあります。この記事ではそれらを詳しくリストします。

この記事では、CSS を使用して三角形を描く 6 つの方法を学ぶことができます。これらはすべて習得が非常に簡単です。

もちろん、この記事は単なる出発点にすぎません。CSS は日々変化しています。この記事には記載されていない興味深い方法があるかもしれません。コメント欄に追加していただければ幸いです。

境界線を使って三角形を描く

ほとんどの人は境界線を使用して三角形を実装できるはずであり、さまざまな対面体験でよく登場します。高さと幅がゼロで、境界線が透明なコンテナーを使用して実装されます。

簡単なコードは次のとおりです。

div {
  border-top: 50px 実線黄緑;
  border-bottom: 50px 濃いピンク実線;
  border-left: 50px ソリッドビスク;
  border-right: 50px ソリッドチョコレート;
}

高さと幅がゼロのコンテナの場合は、異なる色の境界線を設定します。

このように、3 辺の境界色がtransparentであれば、さまざまな角度の三角形を簡単に作成できます。

CodePen デモ - 境界線を使った三角形

線形グラデーションを使用して三角形を描く

次に、 linear-gradientを使用して三角形を作成します。

その原理も非常にシンプルです。45 45°勾配を実装します。

div {
  幅: 100ピクセル;
  高さ: 100px;
  背景: 線形グラデーション(45度、濃いピンク、黄緑);
} 

色をグラデーションから 2 つの固定色に変更します。

div {
  幅: 100ピクセル;
  高さ: 100px;
  背景: linear-gradient(45度、ディープピンク、ディープピンク50%、イエローグリーン50%、イエローグリーン100%);
} 

次に、いずれかの色を透明にします。

div {
  背景: linear-gradient(45度、濃いピンク、濃いピンク50%、透明50%、透明100%);
} 

rotateまたはscaleことで、さまざまな角度とサイズの三角形を作成することもできます。完全なデモは、こちらでご覧いただけます。

CodePen デモ - 線形グラデーションを使用した三角形

円錐グラデーションを使用して三角形を描く

引き続きグラデーションを使用し、線形グラデーションを使用して上記の三角形を実現しました。興味深いことに、グラデーション ファミリでは、 conic-gradient使用して三角形を実現することもできます。

この方法は、放射状グラデーションの中心点と同様に、角度グラデーションの中心点を設定できるというものです。

角度グラデーションの中心点を50% 0 ( center top 、コンテナの上部の中央) に設定し、角度グラデーションを実行します。特定の角度範囲内では、グラデーションは三角形になります。

高さと幅が200px x 100pxのコンテナがあり、角度グラデーションの中心点を50% 0に設定するとします。

また、以下に示すように、 90°から始まる角度グラデーションマップを描画するように設定します。

最初は、角度グラデーションの形状は 2 番目のエッジに到達する前に三角形になっていることがわかります。適切な角度を選択すると、簡単に三角形を作成できます。

div {
    背景: 円錐グラデーション(90度から50% 0、ディープピンク 0、ディープピンク 45度、透明 45.1度);
} 

上記のコードでdeeppink 45deg, transparent 45.1degに0.1deg追加しているのは、グラデーションによって生じるエイリアシングの影響を排除するためです。このようにして、 conic-gradientを通じて簡単に三角形を作成できます。

同様に、 rotateやscaleを使用すると、さまざまな角度やサイズの三角形を作成することもできます。完全なデモは、こちらでご覧いただけます。

CodePen デモ - 角度グラデーションを使用した三角形

transform: rotate と overflow: hidden で三角形を描画します

この方法は比較的従来的なものであり、 transform: rotateとoverflow: hidden使用します。一目で理解でき、一気に習得できます。簡単なアニメーション図は次のとおりです。

グラフィックの回転中心をleft bottomに設定し、 overflow: hiddenを指定して回転します。

完全なコード:

.三角形 {
    幅: 141ピクセル;
    高さ: 100px;
    位置: 相対的;
    オーバーフロー: 非表示;
    
    ＆：：前に {
        コンテンツ： "";
        位置: 絶対;
        上: 0;
        左: 0;
        右: 0;
        下部: 0;
        背景: 濃いピンク;
        transform-origin: 左下;
        変換: 回転(45度);
    }
}

CodePen デモ - transform: rotate と overflow: hidden で三角形を作成する

クリップパスを使用して三角形を描く

clip-pathは非常に興味深い CSS プロパティです。

clip-path CSS プロパティは、要素の一部のみが表示されるクリッピング領域を作成します。領域内の部分が表示され、領域外の部分は非表示になります。クリッピング領域は、埋め込まれた URL または外部 SVG パスによって参照されるパスによって定義されます。

つまり、 clip-pathを使用すると、コンテナーを任意の形状にクリップできます。

3 つの座標点によって多角形が実現され、余分なスペースが切り取られます。コードも非常にシンプルです。

div {
    背景: 濃いピンク;
    クリップパス: ポリゴン(0 0, 100% 0, 0 100%, 0 0);
} 

CodePen デモ - クリップパスを使用した三角形

このウェブサイト - CSS クリップパス メーカーでは、シンプルなclip-pathグラフィックをすばやく作成し、対応する CSS コードを取得できます。

文字を使って三角形を描く

さて、最後は少しユニークですが、文字を使用して三角形を表すことです。

以下に、いくつかの三角形の文字の 10 進 Unicode 表現を示します。

◄ : ◄ 
► : ► 
▼ : ▼ 
▲: ▲
⊿ : ⊿
△ : △

たとえば、 ▼を使用して三角形▼を実装する場合、コードは次のようになります。

<div class="normal">&#9660; </div>

div {
    フォントサイズ: 100px;
    色: ディープピンク;
}

効果はまだ良好です:

ただし、文字表現三角形の使用は、現在設定されているフォントと大きく関係していることに注意してください。フォントが異なると、同じ文字の描画が異なります。Google Font で同じ文字を表現するためにいくつかの異なるフォントをランダムに選択したところ、次のようになりました。

ご覧のとおり、フォントによって形、サイズ、ベースラインが異なります。そのため、グリフ三角形を使用する場合は、指定したフォントがユーザーのブラウザにインストールされていることを確認してください。そうでない場合は、この方法を使用しないでください。

完全な比較デモについては、ここをクリックしてください:

CodePen デモ - 文字を使用して三角形を実装する

やっと

さて、これでこの記事は終わりです。CSS を使用して三角形を描く 6 つの異なる方法についてこの記事がお役に立てば幸いです。

最も興味深い CSS 情報を入手したい場合は、私の公式アカウント - iCSS フロントエンド ニュースをお見逃しなく 😄

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

これで、CSS を使用して三角形を実装する昔ながらの手法 (さまざまな方法) に関するこの記事は終了です。CSS で三角形を実装する手法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。