CSSのclip-pathで図形を作る方法【初心者向け】

clip-pathとは？要素を好きな形に切り抜こう

「要素を丸や三角に切り抜きたい」「セクションの区切りを斜めにしたい」——Webデザインで四角以外の形を作りたいとき、CSSのclip-path（クリップパス）が使えます。

clip-pathを使うと、要素を円・三角形・六角形・斜め切りなど自由な形に切り抜けます。この記事では、基本の形状関数から実践的なデザインパターンまで解説します。

基本構文と形状関数

/* 基本構文 */
clip-path: 形状関数(値);

4つの基本形状

polygon()の座標指定方法

polygon()は頂点の座標をx% y%で指定します。左上が0% 0%、右下が100% 100%です。

/* 三角形: 3つの頂点を指定 */
clip-path: polygon(
  50% 0%,    /* 上の中央 */
  0% 100%,   /* 左下 */
  100% 100%  /* 右下 */
);

clip-pathとoverflow: hiddenの違い

overflow: hidden は四角形でしか切り抜けませんが、clip-path は自由な形で切り抜けます。

実践コード例①：プロフィール画像を円形に切り抜く

/* circle()で円形に切り抜く */
.avatar {
  width: 120px;
  height: 120px;
  clip-path: circle(50%);
  object-fit: cover; /* 画像の比率を保つ */
}

/* border-radiusでも同じことができるが、
   clip-pathは画像以外の要素にも使える */
.avatar-alt {
  border-radius: 50%;
  overflow: hidden;
}

/* 楕円形に切り抜く */
.avatar-ellipse {
  width: 150px;
  height: 100px;
  clip-path: ellipse(50% 50%);
}

円形の切り抜きはborder-radius: 50%でもできますが、clip-pathはより複雑な形にも対応できます。

実践コード例②：セクション区切りを斜めにする

/* 下辺を斜めに切る */
.hero-section {
  background-color: #0d9488;
  color: white;
  padding: 80px 24px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* 上辺を斜めに切る（前のセクションと合わせる） */
.next-section {
  padding: 80px 24px;
  margin-top: -60px; /* 斜め部分の重なりを調整 */
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

/* 波形のセクション区切り */
.wave-section {
  clip-path: polygon(
    0 0, 100% 0, 100% 80%,
    75% 90%, 50% 80%, 25% 90%, 0 80%
  );
}

斜めのセクション区切りはモダンなWebサイトでよく使われるデザインパターンです。背景色の設定はCSSの背景設定で学べます。

実践コード例③：ホバーで形が変わるアニメーション

.shape-card {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #0d9488, #3b82f6);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* ひし形 */
  transition: clip-path 0.4s ease;
}

.shape-card:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* 四角形に変化 */
}

/* 円形 → 四角形 */
.morph {
  width: 150px;
  height: 150px;
  background-color: #0d9488;
  clip-path: circle(50%);
  transition: clip-path 0.3s ease;
}

.morph:hover {
  clip-path: inset(0 round 12px); /* 角丸の四角形に */
}

clip-pathはtransitionでアニメーションできます。ただし、頂点の数が同じでないとアニメーションが効かない点に注意してください。hoverの使い方はCSSのhoverで動きをつける方法を参照してください。

よくある間違い・注意点

❌ clip-pathで切り取られた部分はクリックできない

切り取られた領域は見えないだけでなく、クリックやホバーも反応しません。ボタンにclip-pathを使う場合は、クリック領域が小さくなりすぎないよう注意しましょう。

❌ polygon()の座標は時計回りで指定する

頂点を反時計回りに指定すると意図しない形になることがあります。左上から時計回りに指定するのが基本です。

複雑な形状はジェネレーターツールを活用

六角形や星形など複雑な形は、座標を手計算するのが大変です。「CSS clip-path generator」で検索すると、GUIで形を作ってコードを生成できるツールが見つかります。

レスポンシブでの注意

%指定なら要素のサイズに合わせて自動的にスケールします。px指定だと画面サイズによって見た目が変わるので、%を使うのが基本です。レスポンシブの基本はレスポンシブデザインの作り方で学べます。

ブラウザ対応状況

基本形状（circle, ellipse, polygon, inset）は全モダンブラウザで対応しています。path()（SVGパスを使う方法）はChrome・Edge・Firefoxで対応済みです。

clip-pathを使うときの注意点

clip-pathで切り抜いた部分は見えなくなりますが、要素自体のサイズは変わりません。つまり、見えない部分もスペースを占めたままです。レイアウトがずれると感じたら、要素のサイズや余白を調整しましょう。

また、clip-pathはテキストにも使えますが、文字が途中で切れてしまうことがあります。基本的には画像や装飾用の要素に使うのがおすすめです。

アニメーションと組み合わせると、さらに面白い表現ができます。transitionプロパティを一緒に指定すれば、ホバー時に形が滑らかに変化するエフェクトを作れます。たとえば丸から星形に変わるような動きも実現できます。

まとめ

まずはcircle()とpolygon()から始めましょう。CSSの基礎全体はCSSとは？初心者向け解説で学べます。アニメーションとの組み合わせはCSSアニメーションの作り方を参照してください。transitionの基本はCSSトランジション入門で学べます。

関連記事

• CSSとは？初心者向け解説 — CSS基礎に戻る
• CSSアニメーションの作り方 — clip-pathのアニメーション
• CSSトランジション入門 — 形状変化のトランジション
• CSSのhoverで動きをつける方法 — hoverで形を変える
• CSSの背景設定 — 背景との組み合わせ
• レスポンシブデザインの作り方 — レスポンシブでのclip-path調整