【CSS】clip-pathを使って三角形を作る

今回はclip-pathプロパティを用いて、三角形をCSSで簡単に作る方法をご紹介します！

clip-path の指定方法

まずは、clip-path: poligon()で三角形を作る場合は
カンマ区切りで頂点の座標をこのように指定します。

【poligon】三角形の場合
clip-path: poligon(x軸の座標 y軸の座標, x軸の座標 y軸の座標,軸の座標 y軸の座)三角形の場合

上向き三角形の場合は
clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
となりこのようになります。

See the Pen Untitled by noz (@noz3) on CodePen.

/* 上向き ▲ */
.up {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* 右向き ▶︎ */
.right {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 下向き ▼ */
.down {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 左向き ◀︎ */
.left {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

clip-pathは自由度が高くいろいろな形を作れます。

四角形

clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

こちらは、４辺の四角形です。

カンマが４つ区切りなので、分かりやすいですね。

25% 0%→左上
100% 0%→右上
75% 100%→右下
0% 100%→左下

の時計回りです。

矢印

clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

フォームなどでも見かける
ステップバーにも使用できそうですね・・！！

こちらは、先ほどの軸と違ってカンマの区切りが一つ増えてます。

このような場合は、左から上の軸、右、右下、左、左上のように
時計回りで指定してきます。

clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

便利なジェネレーターはコレ！

有名なクリップパス ジェネレーターに「clippy」　というものがあります！

ドラッグでポイントを動かしで、難しい形も自在に作れるのでとても便利です。

是非、活用してみてください！

他の記事で、おすすめなcss ジェネレーターをご紹介しています！

こちらも良かったら覗いてみてください。

あわせて読みたい

【まとめ】グラデーションcssをコピー！ 厳選便利ツール 3選 迷った時に便利なジェネレーターを３つご紹介します！ 【時短に！選べるグラデーション(front-end tools)】 70種類以上のグラデーションサンプルから選べるコピーツール…