カテゴリー: 開発ツール
CSS clip-path ジェネレーター
形状を選んで clip-path の値をコピー
円や楕円から六角形、矢印、吹き出しまで形状を選び、端からのインセットを調整すると、結果の clip-path の値がライブプレビューとともに得られます。
出力
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
clip-path のポリゴンを手で書くには、各点のパーセンテージ位置をプロットし、それらがどうつながるかを頭の中で組み立てる必要があり、単純な三角形以上のものでは反復作業がすぐに遅くなります。このツールはよく使われる形状を出来合いの座標リストとして用意しており、さらに1つのインセットコントロールでどの形状でも各点を中心に向かって同じ割合で縮小できるため、自分でジオメトリを計算しなくても使える clip-path をプレビューしてコピーできます。
使い方
- 形状を選びます。
- インセットを調整してボックス内での大きさを変えます。
- clip-path 宣言をコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- なぜ円と楕円だけ他の形状と挙動が違うのですか?
- circle() と ellipse() は半径を取るため、インセットはその半径を直接縮小しますが、ポリゴン形状ではすべての点を同じ割合で中心に向かって縮小します。
- clip-path はレイアウトに影響しますか、それとも見た目だけですか?
- 見た目だけです。要素はレイアウト上の元のボックスをそのまま保持し、clip-path は overflow: hidden がボックス外のコンテンツを隠すのと同じように、形状の外側にある見た目だけを隠します。
- サーバーに何か送信されますか?
- いいえ。形状の各点は選んだ形とインセットからページ内で計算されるため、プレビューが即座に更新されます。