CSS Clip-Pathジェネレーター - ポリゴン・円・楕円の形状を無料で作成

ポリゴン、円、楕円のCSS clip-path値をライブプレビューとプリセット形状で生成

CSSツール

Tool

Shape Type

Preset Shapes

CSS

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

使い方

clip-pathは、定義された形状の外側にある要素の部分をクリップ（非表示に）するCSSプロパティです。ポリゴン、円、楕円、SVGパスの形状をサポートしています。

はい。polygon()のすべてのパーセント値は要素のバウンディングボックスに対して相対的なので、形状は要素のサイズに合わせて自動的にスケーリングされます。

はい。両方のキーフレームが同じ形状タイプと同じ数のポリゴンポイントを使用している限り可能です。CSSトランジションとアニメーションは、2つのclip-path値の間をスムーズに補間できます。

clip-pathはすべてのモダンブラウザで十分にサポートされています。古いブラウザのサポートには、Safari 13以前のバージョンで-webkit-プレフィックスが必要な場合があります。

使い方

1形状タイプを選択：ポリゴン、円、または楕円

2ポリゴンの場合、プリセット形状をクリック（三角形、五角形、六角形、星、矢印、十字）

3円/楕円の場合、半径スライダーを調整

4グラデーション要素にクリップを適用したライブプレビューを確認

5CSS clip-path値をコピーして要素に追加

よくある質問