CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのclip-pathプロパティで三角形を作成する方法

三角形は、CSSのclip-pathプロパティを使うことで簡単に作成できます。画像ファイルやSVGに頼らず、純粋なCSSだけで図形を描画できるため、軽量で柔軟なデザイン表現が可能になります。

clip-pathプロパティとは

clip-pathプロパティは、要素の表示範囲を切り抜く（クリッピングする）ためのプロパティです。特にpolygon()関数を使用すると、複数の座標点を指定することで任意の多角形を自由に描くことができます。

構文

CSS clip-pathプロパティの基本構文は以下のとおりです。

Selector {
    clip-path: /*値*/
}

例1：clip-pathで三角形を作る

次の例では、clip-pathプロパティとpolygon()関数を組み合わせて、下向きの三角形を作成しています。3つの座標「上部中央」「右下」「左下」を指定することで、三角形の形状が定義されます。

<!DOCTYPE html>
<html>
    <head>
       <style>
          div {
             padding: 10%;
             border-radius: 2%;
             width: 10%;
             box-shadow: inset 0 0 80px violet;
             clip-path: polygon(50% 0, 100% 100%, 0% 100%);
          }
       </style>
    </head>
    <body>
       <div></div>
    </body>
</html>

上記コードの実行結果は以下のとおりです。

CSSのclip-pathプロパティで三角形を作成する方法

例2：borderプロパティを使った三角形

比較として、borderプロパティを組み合わせて三角形を作成する方法も紹介します。隣接するボーダーの境界線が斜めになる性質を利用した、古典的なテクニックです。

<!DOCTYPE html>
<html>
    <head>
       <style>
          div {
             display: flex;
             margin: 10px 0 20px;
          }
          div > div {
             height: 12px;
             border-top: 40px ridge orange;
             border-right: 20px solid white;
             border-bottom: 60px ridge cornflowerblue;
             border-left: 80px solid white;
          }
       </style>
    </head>
    <body>
       <div>
          <div></div>
       </div>
    </body>
</html>

上記コードの実行結果は以下のとおりです。

CSSのclip-pathプロパティで三角形を作成する方法

まとめ

三角形を作成するには、clip-pathのpolygon()関数で3つの頂点座標を指定する方法が最もシンプルで直感的です。一方、borderを使った方法は古くから使われている手法ですが、clip-pathの方が直感的に形状をコントロールできるため、現在のWeb制作ではclip-pathの活用が推奨されています。用途に応じて両者を使い分けましょう。

  1. CSSで4列のレイアウトグリッドを作成する方法

    CSSで4列のレイアウトグリッドを作成するには、各カラムとなる要素に float: left; を指定し、幅を 25% に設定するのが基本的な手法です。これにより、4つの要素が横一列に均等に並びます。以下に具体的なコード例を示します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {

  2. CSSだけでチェックマークを作成する方法【サンプルコード付き】

    CSSを使えば、画像ファイルやアイコンフォントに頼ることなく、独自デザインのチェックマークを作成できます。この記事では、::before／::after の疑似要素を活用する方法と、border＋transform を使うシンプルな方法の2つの実装例を、サンプルコードと実行結果あわせて紹介します。 方法1：疑似要素（::before / ::after）を使う方法 1つ目の例では、正方形のボックスに対して ::before と ::after の2つの疑似要素を配置し、それぞれを回転させることで、チェックマークを構成する「短い線」と「長い線」を描画しています。 <!DOCTYPE htm