N2
NanToo
AD
デザイン・Web制作

CSS clip-path 形状集

CSS clip-pathで使える形状プリセット38種。六角形・星・矢印・吹き出し・ハート・葉・リボン・チケットなど、polygon()コードをコピペで即利用。パラメータ調整可能な形状も含む。

プリセット (38)

三角形

Triangle ・ 上向きの二等辺三角形。頂点位置を調整可能。

多角形
背景
パラメータ調整
頂点位置50%

CSS (ベンダープレフィックス付き)

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

CSS (シンプル)

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

HTML 使用例

<div class="shape"></div>

<style>
.shape {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
</style>
AD
このツールについて問い合わせる →

CSS clip-path 形状集について

clip-pathとは

clip-pathは、CSSで要素を任意の形状に切り抜く（クリッピング）プロパティです。画像や<div>を六角形、星、矢印、吹き出しなど自由な形にできます。JavaScriptやSVG、画像編集なしで、CSSのみで実現できるのが大きな利点です。

本ツールは38種類のプリセット形状を提供し、そのままコピペして使えます。polygon()関数の座標を手で計算する必要はありません。

対応する形状カテゴリ

カテゴリ用途主な形状
多角形幾何学的な装飾三角形、五角形、六角形、八角形
幾何学バッジ・特徴台形、ひし形、星、爆発、十字
矢印ナビ・CTA右/左/上矢印、山形、しおり
吹き出しチャット・引用speech bubble、思考雲、callout
装飾デザイン性ハート、稲妻、葉、盾、封筒、リボン
切抜きエッジ処理角切り、ジグザグ、波、チケット、破れ

polygon()関数の基本

clip-path: polygon()は、頂点の座標を順番に指定して多角形を作ります。座標は要素の左上を原点(0% 0%)、右下を(100% 100%)とするパーセンテージ指定が一般的です。

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

座標は最低3点以上必要で、最後の点から自動的に最初の点へ閉じられます。本ツールではすべての座標が最適化済みのプリセットを提供します。

clip-path使用時の注意点

  • Safariベンダープレフィックス: iOS Safari では -webkit-clip-path も併記するのが安全です。本ツールは両方を自動出力します
  • box-shadow が切られる: clip-pathを適用するとbox-shadowも切り取られてしまいます。影が必要な場合はfilter: drop-shadow()を使うか、親要素に影を付けます
  • overflow要素: 子要素が要素の境界を超えている場合、clip-pathで一緒に切られます
  • アニメーション可能: 同じ頂点数のpolygon()間なら、transitionでスムーズに形が変化します
  • マウスイベント: 切り取られた領域はクリックできません（見た目と判定が一致）

よくある質問

Q. IE11で使えますか？
IE11はclip-pathをサポートしていません（SVG clipPathは一部サポート）。ただしIE11は既にサポート終了しているため、新規サイトでは問題になりません。モダンブラウザ（Chrome、Firefox、Safari、Edge）はすべてサポートしています。
Q. 画像を切り抜くには？
<code>&lt;img&gt;</code>タグ、または背景画像を設定した<code>&lt;div&gt;</code>にclip-pathプロパティを直接適用します。本ツールのプレビューは背景色で表示していますが、実際の利用では<code>background-image: url(photo.jpg); background-size: cover;</code>と組み合わせて使うケースが多いです。
Q. 自由な形（ロゴ型など）を作るには？
polygon()で表現できない複雑な形状は、SVGで作ったパスをclipPath要素として参照する<code>clip-path: url(#myPath)</code>記法を使います。ただしシンプルなロゴであれば、本ツールの38プリセットの組み合わせやパラメータ調整で十分対応できます。
Q. 形状が意図通りにならないのですが？
要素の縦横比によってパーセンテージ指定の見た目は変わります。例えば正三角形を保ちたい場合は要素を正方形にするか、px単位でclip-pathを指定します。本ツールでは要素サイズを変更して形状の変化を確認できるプレビュー機能を提供しています。
このツールを評価
—(0件)