【CSS】clip-path入門編、三角形も丸も自由自在に作成！

はじめに
clip-path について
初心者でもできるclip-path活用アイデア
- 三角形のサンプルコード
- ホバーで形を変えるアニメーション
よくある注意点
おすすめツール
おわりに

はじめに

こんにちは！たくまです！

みなさんはCSSで三角形を作成する際、どのように作成しますか？
僕はWeb制作を始めたての頃、borderを使用して以下のように作成していました。

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #555555;
  border-right: 0;
}

確かに上記で三角形を表現することは可能です。
ただ、borderを使用した際には以下のような問題点があります。

背景色や背景画像が使えない（「面」がない）
構造が直感的ではない（なぜかwidth/heightがゼロ）
サイズ調整が難しい（borderの太さで調整する必要がある）
影や角丸など、CSSの他のプロパティと相性が悪い

上記にあげたように、使い勝手が悪いです。

そこで、今回はclip-pathを使用した三角形などの作成方法を紹介します。
clip-pathであれば背景色や影をつけることができ、仕組みさえ覚えたらかなり応用が効きます。

clip-path について

clip-pathの基本

clip-path は、CSSで要素の表示領域を指定の形で切り抜くためのプロパティです。
簡単に言えば、「ここだけ見せて、それ以外は隠す」マスクのようなものをイメージしてください。

たとえば、画像を円形に見せたいときは以下のように書きます：

.circle-image {
  clip-path: circle(50%);
}

画像の角を丸くするのではなく、「切り抜いて」形を変えるのがポイントです。
clip-path は border-radius と違い、三角形や斜めの多角形、波形なども再現できる点が非常に強力です。

clip-pathのメリットとは？

clip-path の大きなメリットは以下の通りです。

1. 背景色や背景画像を活かした形状が作れる

よくある「CSS三角形」は、冒頭で紹介したように以下のような border を使って作ります。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

これは「三角形」に見えるだけで、要素としての面積はゼロであり、背景色や背景画像を使えません。

一方で clip-path を使うと、普通に背景色や画像を適用した状態で三角形を表現できます。

.clip-triangle {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

これはしっかりと“面”として存在する三角形。背景画像も透過も影もOKです。

2. クリック範囲（hit area）も変わる

clip-path を使って表示されていない部分は、マウスイベントの対象外になります。つまり、視覚的に見えない部分はクリックできません。

たとえば、円形ボタンを clip-path: circle() で作れば、円の中だけがクリック可能になります。
これはアクセシビリティやUIの一貫性の観点でも大きなメリットです。

3. アニメーションとの相性が良い

clip-path は数値で指定するので、hover時の形状変化やスクロールアニメーションにも使いやすいです。

.box {
  clip-path: circle(40%);
  transition: clip-path 0.4s ease;
}
.box:hover {
  clip-path: circle(75%);
}

ボタンのホバーやカードの動きにちょっと変化をつけたいとき、見た目にインパクトを出したいときに使えます。

clip-pathで作れる主な形

clip-path は様々な関数で形を指定できます

形	使う関数	説明
円形	`circle()`	中心と半径を指定
楕円形	`ellipse()`	横・縦方向の半径を指定
四角形（角丸も可）	`inset()`	内側の距離と角丸を指定
三角形〜多角形	`polygon()`	自由な頂点で指定
SVGパス	`path()`	複雑な図形も対応（上級者向け）

初心者でもできるclip-path活用アイデア

三角形のサンプルコード

.clip-triangle {
  width: 200px;
  height: 200px;
  background: #0077cc;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  margin: 40px auto;
}

基本的な三角形です。

ホバーで形を変えるアニメーション

.card {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 0.3s ease;
}
.card:hover {
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

ほんの少し形を変えるだけで「動きのあるおしゃれなUI」が実現できます。
こちらは実際にデモ画面でご覧ください。

See the Pen Untitled by 株式会社TOKOS (@TOKOS-the-looper) on CodePen.