デザイン・Web制作

CSS clip-path 形状集

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

登録不要

形状カテゴリー

プリセット (38)

三角形

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

多角形
polygon(50% 0%, 100% 100%, 0% 100%)
プレビュー背景
パラメータ調整
頂点位置50%

CSS（標準・互換）

-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
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);
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
</style>

このツールについて問い合わせる →

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点以上必要で、最後の点から自動的に最初の点へ閉じられます。本ツールでは38種類の座標プリセットを提供します。

clip-path使用時の注意点

  • 旧Safari向け互換表記: 現行ブラウザは標準の clip-path に対応しています。本ツールの互換出力は、古いSafari系も考慮して -webkit-clip-path を標準宣言より先に併記します
  • 影は親要素へ: フィルター処理の後にクリッピングされるため、clip-pathと同じ要素のbox-shadowやdrop-shadowのうちクリップ領域外は切り取られます。切り抜いた輪郭の外影が必要な場合は親要素に filter: drop-shadow() を指定し、子要素だけをclip-pathで切り抜きます
  • overflow要素: 子要素が要素の境界を超えている場合、clip-pathで一緒に切られます
  • アニメーション可能: 同じ頂点数のpolygon()間なら、transitionでスムーズに形が変化します
  • マウスイベント: 切り取られた領域はクリックできません（見た目と判定が一致）

よくある質問

Q. IE11で使えますか？
IE11はCSSのclip-path基本図形に対応していません。現行の主要ブラウザでは広く利用できますが、必要な対象環境はMDNの互換表と実機で確認してください。
Q. 画像を切り抜くには？
img要素、または背景画像を設定したdiv要素にclip-pathプロパティを適用します。本ツールのプレビューは色で表示していますが、background-imageとbackground-sizeを指定した要素にも同じ形状値を利用できます。
Q. 自由な形（ロゴ型など）を作るには？
polygon()で表現しにくい複雑な形状は、SVGのclipPath要素をclip-path: url(#myPath)で参照する方法があります。本ツールは単一のpolygon()による38プリセットと、一部形状のパラメータ調整に対応します。
Q. 形状が意図通りにならないのですが？
パーセンテージ座標の見た目は要素の縦横比で変わります。本ツールは正方形のプレビューを表示するため、実際の要素が長方形なら同じ値でも横長・縦長に見えます。利用先の寸法でも確認してください。
このツールを評価
—(0件)