Toolipedia
JA
← すべてのテキストツール

CSS clip-pathジェネレーター

点をドラッグして多角形、円、図形を作り、clip-pathのCSSをコピーします。

  • 無料
  • 登録不要
  • どの端末でも使える

約CSS clip-pathジェネレーター

プレビュー上で点をドラッグして、要素を三角形、六角形、矢印、円、または自由な多角形に切り抜き、clip-pathの値をコピーできます。パーセントベースの座標を使うため、形状がレスポンシブになります。切り抜かれた領域も実際には存在しているため、影や枠線も切り取られることに注意してください。

CSS clip-pathジェネレーターの使い方

  1. 多角形や円などの形を選択してください。
  2. プレビュー上の点をドラッグして、形を整えてください。
  3. clip-pathのCSSをコピーして、要素に適用してください。

このツールを使う理由

別名

よくある質問

clip-pathを使うとbox-shadowが切れてしまうのはなぜですか?

clip-pathは、影を含め、形の外側にあるものをすべて切り取ります。影は親のラッパーにfilter: drop-shadowを使って付けると、切り抜かれた輪郭に沿います。

2つのclip-pathの形の間でアニメーションさせられますか?

はい、両方の形が、同じ数のポイントで同じ関数を使っている場合です。そうすると、ブラウザはトランジション中に、各ポイントをなめらかに動かします。

clip-pathは、要素が占めるスペースを変えますか?

いいえ。要素はレイアウト内で元のボックスを保ち、見える領域だけが切り取られます。見える形の外側でのクリックも無視されます。

CSS clip-pathジェネレーターは無料ですか？

はい。ToolipediaのCSS clip-pathジェネレーターは無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

CSS clip-pathジェネレーター を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール