MENU
  1. ホーム
  2. CSS
  3. 【CSS初心者向け】clip-pathの使い方完全ガイド｜円形・多角形など自由な形状を作る方法を徹底解説

【CSS初心者向け】clip-pathの使い方完全ガイド｜円形・多角形など自由な形状を作る方法を徹底解説

CSS

「画像を円形に切り抜きたい」「三角形のボタンを作りたい」「斜めにカットされたセクションを実装したい」──そんな時に役立つのが、CSSのclip-pathプロパティです。

従来は画像編集ソフトでしか実現できなかった複雑な形状も、clip-pathを使えばCSSだけで簡単に作れます。この記事では、CSS初心者の方にもわかりやすく、clip-pathの基本から実践的な使い方まで徹底解説します。

目次

clip-pathとは？

clip-pathは、要素の表示領域を切り抜いて特定の形状だけを表示させるCSSプロパティです。四角形だけでなく、円形、三角形、星型など、あらゆる形状を作ることができます。

clip-pathでできること

  • 画像を円形や多角形に切り抜く
  • ボタンやカードを特殊な形状にする
  • セクションを斜めにカットする
  • ホバー時に形状を変化させるアニメーション
  • 複雑なレイアウトデザインの実現

clip-pathのメリット

画像編集不要：画像ファイルを編集せず、CSSだけで形状を変更できる

動的な変更が可能：ホバーやアニメーションで形状を変えられる

レスポンシブ対応：パーセント指定で、画面サイズに応じて自動調整

軽量：追加の画像ファイルが不要なため、ページの読み込みが速い

メンテナンスが簡単：コードを変更するだけで形状を調整できる

基本的な使い方

clip-pathの基本的な構文は以下の通りです。

.element {
  clip-path: 形状関数(パラメータ);
}

例えば、要素を円形に切り抜く場合：

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

たったこれだけで、要素が円形になります！

HTMLとCSSの基本例

<div class="clipped-box">
  円形に切り抜かれたボックス
</div>


.clipped-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  clip-path: circle(50%);
}

clip-pathの形状関数4種類

clip-pathには4つの主要な形状関数があります。それぞれ見ていきましょう。

1. circle（円形）

円形に切り抜く最もシンプルな形状です。

clip-path: circle(半径 at 中心位置);

基本的な使い方：

/* 要素の中心に、最大サイズの円 */
clip-path: circle(50%);

/* 半径100pxの円 */
clip-path: circle(100px);

/* 中心位置を指定 */
clip-path: circle(50% at 30% 30%);

/* 左上に配置された小さな円 */
clip-path: circle(80px at 0 0);

実用例：プロフィール画像を円形に

.profile-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  clip-path: circle(50%);
}

2. ellipse（楕円形）

横長や縦長の楕円形を作れます。

clip-path: ellipse(横半径 縦半径 at 中心位置);

基本的な使い方：

/* 横長の楕円 */
clip-path: ellipse(50% 30%);

/* 縦長の楕円 */
clip-path: ellipse(30% 50%);

/* ピクセル指定 */
clip-path: ellipse(150px 100px at center);

/* 中心位置をカスタマイズ */
clip-path: ellipse(40% 50% at 60% 50%);

実用例：楕円形のバナー

.ellipse-banner {
  width: 100%;
  height: 300px;
  background: #4ecdc4;
  clip-path: ellipse(80% 50% at 50% 50%);
}

3. polygon（多角形）

座標を指定して、自由な多角形を作成できます。最も汎用性が高い形状関数です。

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);

座標は、要素の左上を起点（0% 0%）として、パーセントまたはピクセルで指定します。

基本的な形状：

/* 三角形（上向き） */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

/* 三角形（右向き） */
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);

/* 四角形（ダイヤモンド型） */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* 五角形 */
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

/* 六角形 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

/* 八角形 */
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

/* 星型 */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

/* 台形 */
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

/* 平行四辺形 */
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

/* 矢印（右向き） */
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

/* 吹き出し */
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

/* ノッチ（スマホ風） */
clip-path: polygon(0% 0%, 35% 0%, 38% 8%, 62% 8%, 65% 0%, 100% 0%, 100% 100%, 0% 100%);

実用例：斜めカットのヒーローセクション

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 100px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

4. inset（内側の四角形）

要素の端から内側に向かって切り抜きます。角丸も指定できるため、border-radiusの代わりとしても使えます。

clip-path: inset(上 右 下 左 round 角丸);

基本的な使い方：

/* 全方向から10px内側 */
clip-path: inset(10px);

/* 上下10px、左右20px */
clip-path: inset(10px 20px);

/* 個別指定（上 右 下 左） */
clip-path: inset(10px 20px 30px 40px);

/* 角丸付き */
clip-path: inset(0px round 20px);

/* 個別に角丸を指定 */
clip-path: inset(10px round 20px 10px 0 5px);

実用例：角丸のカード

.rounded-card {
  background: white;
  padding: 20px;
  clip-path: inset(0 round 15px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

実践的な使用例【コピペOK】

実際のWebサイトで使える、実践的なコード例を10パターンご紹介します。

例1：円形のプロフィール画像

<img src="profile.jpg" alt="プロフィール" class="profile-pic">


.profile-pic {
  width: 200px;
  height: 200px;
  object-fit: cover;
  clip-path: circle(50%);
  transition: clip-path 0.3s ease;
}

.profile-pic:hover {
  clip-path: circle(45%);
}

例2：三角形のアイコンボタン

<button class="triangle-btn">
  <span>▶</span>
</button>


.triangle-btn {
  width: 80px;
  height: 80px;
  background: #4ecdc4;
  border: none;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.triangle-btn:hover {
  transform: scale(1.1);
}

.triangle-btn span {
  color: white;
  font-size: 24px;
  transform: translateY(10px);
}

例3：対角線カットのセクション

<section class="diagonal-section">
  <h2>斜めにカットされたセクション</h2>
  <p>おしゃれなレイアウトを簡単に実現</p>
</section>


.diagonal-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 100px 20px;
  color: white;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

例4：波型の下部カット

<section class="wave-section">
  <h2>波型のセクション</h2>
</section>


.wave-section {
  background: #ff6b6b;
  padding: 80px 20px;
  color: white;
  text-align: center;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 85%,
    95% 90%, 85% 90%, 80% 85%,
    75% 90%, 65% 90%, 60% 85%,
    55% 90%, 45% 90%, 40% 85%,
    35% 90%, 25% 90%, 20% 85%,
    15% 90%, 5% 90%, 0% 85%
  );
}

例5：ホバーで形が変わるカード

<div class="morph-card">
  <img src="photo.jpg" alt="写真">
  <h3>タイトル</h3>
</div>


.morph-card {
  width: 300px;
  background: white;
  overflow: hidden;
  transition: clip-path 0.5s ease;
  clip-path: inset(0 round 0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.morph-card:hover {
  clip-path: inset(0 round 30px);
}

.morph-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.morph-card h3 {
  padding: 20px;
  margin: 0;
}

例6：六角形のグリッドレイアウト

<div class="hexagon-grid">
  <div class="hexagon">
    <img src="image1.jpg" alt="画像1">
  </div>
  <div class="hexagon">
    <img src="image2.jpg" alt="画像2">
  </div>
  <div class="hexagon">
    <img src="image3.jpg" alt="画像3">
  </div>
</div>


.hexagon-grid {
  display: flex;
  gap: 10px;
  padding: 20px;
}

.hexagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
}

.hexagon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hexagon:hover img {
  transform: scale(1.1);
}

例7：アニメーション付き読み込み効果

<div class="reveal-container">
  <img src="image.jpg" alt="画像" class="reveal-image">
</div>


.reveal-image {
  width: 100%;
  animation: reveal 2s ease forwards;
}

@keyframes reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

例8：吹き出し風のメッセージボックス

<div class="speech-bubble">
  <p>こんにちは！CSSだけで吹き出しが作れます。</p>
</div>


.speech-bubble {
  position: relative;
  background: #4ecdc4;
  color: white;
  padding: 20px;
  max-width: 300px;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 75%,
    75% 75%, 75% 100%, 70% 75%,
    0% 75%
  );
}

例9：星型の評価アイコン

<div class="star-rating">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>


.star-rating {
  display: flex;
  gap: 10px;
}

.star {
  width: 50px;
  height: 50px;
  background: gold;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%,
    68% 57%, 79% 91%, 50% 70%,
    21% 91%, 32% 57%, 2% 35%,
    39% 35%
  );
  cursor: pointer;
  transition: transform 0.2s ease;
}

.star:hover {
  transform: scale(1.2);
}

例10：ノッチ付きスマホ風デザイン

<div class="phone-screen">
  <div class="screen-content">
    <h3>スマホ画面風</h3>
    <p>ノッチ付きデザイン</p>
  </div>
</div>


.phone-screen {
  width: 300px;
  height: 600px;
  background: #1a1a1a;
  clip-path: polygon(
    0% 0%, 40% 0%, 42% 3%,
    58% 3%, 60% 0%, 100% 0%,
    100% 100%, 0% 100%
  );
  border: 10px solid #333;
  border-radius: 30px;
  overflow: hidden;
}

.screen-content {
  background: white;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
}

clip-pathの便利なツール

複雑な形状を作る際は、オンラインツールを使うと効率的です。

おすすめツール

Clippy（https://bennettfeely.com/clippy/）

  • 視覚的にclip-pathを作成できる最も人気のツール
  • 様々な形状のプリセットがある
  • ドラッグ&ドロップで直感的に操作可能
  • 生成されたCSSコードをそのままコピーできる

CSS clip-path Maker（https://www.cssportal.com/css-clip-path-generator/）

  • シンプルなインターフェース
  • リアルタイムプレビュー機能
  • 初心者にもわかりやすい

Bennett Feely’s Clippy

  • 多角形の頂点を自由に追加・削除できる
  • 座標の数値も細かく調整可能
  • 複雑な形状作成に最適

これらのツールを使えば、コードを書かずに視覚的に形状を作れるため、CSS初心者でも簡単に複雑なデザインを実現できます。

clip-pathとborder-radiusの違い

clip-pathとborder-radiusは、どちらも要素を丸くできますが、いくつか重要な違いがあります。

比較表

特徴clip-pathborder-radius
形状の自由度非常に高い（多角形、星型など）円形・楕円のみ
影の表示box-shadowは元の四角形に適用される形状に沿って影が表示される
アニメーションスムーズにアニメーション可能スムーズにアニメーション可能
ブラウザサポートモダンブラウザで対応非常に広範囲に対応
適用範囲要素全体を切り抜く角だけを丸める
パフォーマンスやや重い軽い

影の扱いの違い

/* border-radius：影が形状に沿う */
.rounded {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 円形の影になる ✓ */
}

/* clip-path：box-shadowは元の四角形に適用される */
.clipped {
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 四角形の影になる ✗ */
}

/* clip-pathで形状に沿った影を作るにはfilterを使う */
.clipped-with-shadow {
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
  /* 円形の影になる ✓ */
}

使い分けのポイント

border-radiusを使うべき場合：

  • 単純な角丸だけが必要な場合
  • 古いブラウザにも対応したい場合
  • パフォーマンスを最優先したい場合
  • 影が重要な要素の場合

clip-pathを使うべき場合：

  • 多角形や複雑な形状が必要な場合
  • アニメーションで形状を変化させたい場合
  • 斜めカットやユニークなデザインを実現したい場合
  • レスポンシブに対応した形状変更が必要な場合

よくある質問とトラブルシューティング

Q1. clip-pathが効かない・表示されない

原因1：要素のサイズが指定されていない

/* ✗ 間違い */
.element {
  clip-path: circle(50%);
  /* 幅と高さが指定されていない */
}

/* ✓ 正しい */
.element {
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
}

原因2：パーセント指定が適切でない

/* circleやellipseで%を使う場合は、要素自体にサイズが必要 */
.element {
  width: 200px;
  height: 200px;
  clip-path: circle(50%); /* この50%は要素サイズの50% */
}

原因3：polygonの座標が範囲外

/* ✗ 間違い：座標が0-100%の範囲外 */
.element {
  clip-path: polygon(50% -10%, 150% 50%, 50% 110%);
}

/* ✓ 正しい：0-100%の範囲内 */
.element {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%);
}

Q2. 影が切り抜いた形状に沿わない

解決策：box-shadowではなくfilter: drop-shadow()を使用

/* ✗ box-shadowは元の四角形に適用される */
.element {
  clip-path: circle(50%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ✓ drop-shadowは切り抜いた形状に沿う */
.element {
  clip-path: circle(50%);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

Q3. アニメーションがカクつく

解決策1：座標の数を減らす

/* ✗ 頂点が多すぎる */
.element {
  clip-path: polygon(/* 20個以上の座標 */);
}

/* ✓ 必要最小限の座標 */
.element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

解決策2：will-changeを使用

.element {
  clip-path: circle(50%);
  will-change: clip-path;
  transition: clip-path 0.3s ease;
}

.element:hover {
  clip-path: circle(60%);
}

Q4. 切り抜いた外側をクリックできてしまう

原因：clip-pathは視覚的に切り抜くだけで、要素のボックスモデルは変わりません

解決策：pointer-eventsを使用

.element {
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
}

/* 切り抜かれた外側のクリックを無効化 */
.element::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

Q5. レスポンシブ対応はどうすればいい？

解決策：パーセント指定を使う

/* ✓ パーセント指定で自動調整 */
.responsive-element {
  width: 100%;
  max-width: 500px;
  height: 300px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* メディアクエリで形状を変える */
@media (max-width: 768px) {
  .responsive-element {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  }
}

Q6. 古いブラウザ対応はどうすればいい？

解決策：@supportsとフォールバックを使用

/* フォールバック：古いブラウザ向け */
.element {
  border-radius: 50%;
  overflow: hidden;
}

/* モダンブラウザではclip-pathを使用 */
@supports (clip-path: circle(50%)) {
  .element {
    border-radius: 0;
    clip-path: circle(50%);
  }
}

Q7. パフォーマンスが気になる

解決策：

  1. 必要最小限の使用：ページ全体で多用しすぎない
  2. シンプルな形状を優先：複雑なpolygonは処理が重い
  3. GPUアクセラレーションを活用：
.element {
  clip-path: circle(50%);
  transform: translateZ(0); /* GPUアクセラレーションを有効化 */
}

clip-pathを使う際の注意点

1. 要素のボックスモデルは変わらない

clip-pathは視覚的に切り抜くだけで、要素の実際のサイズや領域は変わりません。

.element {
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
  /* 実際の要素サイズは200x200pxのまま */
  /* レイアウトへの影響も200x200pxとして計算される */
}

2. 切り抜いた外側もクリック可能

切り抜かれた外側の「見えない部分」もクリックやホバーの対象になります。

/* 解決策：pointer-eventsで制御 */
.element {
  clip-path: circle(50%);
  position: relative;
}

/* 見えない部分のクリックを防ぐ */
.element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: circle(50%);
  pointer-events: auto;
}

3. アクセシビリティへの配慮

切り抜かれた部分は見えませんが、スクリーンリーダーには読み上げられます。重要な情報が切り抜かれないよう注意しましょう。

4. 印刷時の表示

clip-pathは印刷時にも適用されるため、印刷用のスタイルを別途用意することをおすすめします。

@media print {
  .element {
    clip-path: none; /* 印刷時は切り抜きを解除 */
  }
}

ブラウザサポート状況

clip-pathは、モダンブラウザでは広くサポートされています。

サポート状況（2025年時点）

  • Chrome：55+ (2016年12月〜)
  • Firefox：54+ (2017年6月〜)
  • Safari：9.1+ (2016年3月〜)、ただしプレフィックス -webkit- が必要な場合あり
  • Edge：79+ (2020年1月〜、Chromiumベース)
  • IE：非対応

ベンダープレフィックスの使用

古いSafariやモバイルブラウザ向けに、プレフィックスを付けると安全です。

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

フォールバック例

/* 古いブラウザ向けフォールバック */
.element {
  border-radius: 50%; /* フォールバック */
  overflow: hidden;
}

/* モダンブラウザ */
@supports (clip-path: circle(50%)) {
  .element {
    border-radius: 0;
    -webkit-clip-path: circle(50%);
    clip-path: circle(50%);
  }
}

まとめ

clip-pathを使えば、CSSだけで自由な形状を作ることができます。

この記事のポイント：

  • clip-pathは要素を様々な形状に切り抜くCSSプロパティ
  • circle（円形）、ellipse（楕円形）、polygon（多角形）、inset（内側の四角形）の4種類がある
  • polygonを使えば三角形、六角形、星型など、あらゆる形状を作れる
  • 画像編集ソフトなしで、動的な形状変更やアニメーションが可能
  • 影を形状に沿わせるにはfilter: drop-shadow()を使う
  • オンラインツール（Clippy等）を使えば、視覚的に形状を作成できる
  • モダンブラウザでは広くサポートされているが、古いブラウザ向けにはフォールバックを用意

まずは円形や三角形などのシンプルな形状から試してみて、徐々に複雑なデザインに挑戦してみてください。Clippyなどのツールを使えば、コードを書かなくても視覚的に形状を作れるので、ぜひ試してみましょう！

clip-pathをマスターすれば、ワンランク上のWebデザインが実現できます。この記事のサンプルコードをコピペして、あなたのプロジェクトに取り入れてみてください！

CSS
プログラミングの独学におすすめ
プログラミング言語の人気オンラインコース
独学でプログラミングを学習している方で、エラーなどが発生して効率よく勉強ができないと悩む方は多いはず。Udemyは、プロの講師が動画で実際のプログラムを動かしながら教えてくれるオンライン講座です。講座の価格は、セール期間中には専門書籍を1冊買うよりも安く済むことが多いです。新しく学びたいプログラミング言語がある方は、ぜひUdemyでオンライン講座を探してみてください。
Udemyの詳しい案内はこちら

関連記事

目次