2023年07月4日(火)

CSSで三角形などの図形をclip-pathで作る方法

• 0
• 2
• 2
• 4

CSSで三角形を作るには今までは主に「border」プロパティを使って作成していましたが、モダンブラウザで活用できるようになった「clip-path」プロパティを使うと三角形や多角形などの図形がわりと簡単に作成することができます。

今後はCSSで三角形などの図形を作成する際に「border」ではなく「clip-path」プロパティを使う手法にした方が汎用性も高く活用していけるので自分用メモとして紹介してみます。

［clip-path: polygon］で様々な三角形を作る

「clip-path」プロパティで三角形を作るには「polygon」の値を使用します。

div { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

「clip-path」プロパティの「polygon」でクリッピング領域と座標を指定します。

三角形の場合は頂点が3つになるので、3つのクリッピング領域とそれぞれ座標の位置で三角を形作ります。

作成する三角形は座標の位置を調整することで、上向き・下向き・右向き・左向きなどさまざまな形が作成可能です。
※下記サンプルは上段左から右に向かって「.triangle1」～「.triangle4」、下段左から右に向かっ...