CSS クリップパス形状生成器

現代のCSSクリップパス幾何学で多角形,星,バッジ,六角形,シェブロン形を作ります

ブラウザ内で動作します。ファイルは端末の外に出ません。 確認方法を見る

…

使い方

  1. 1
    ステップ1: CSS クリップパス形状生成器を開いて入力する

    数値やテキストを入力するか、ファイルを追加するか、必要なオプションを選びます。何もアップロードされず、すべてブラウザ内で処理されます。

  2. 2
    ステップ2: CSS クリップパス形状生成器でできること

    現代のCSSクリップパス幾何学で多角形,星,バッジ,六角形,シェブロン形を作ります.

  3. 3
    ステップ3: 結果を確認して比べる

    結果はすぐに表示されます。値を1つ変えると答えがどう動くかを確認し、ご自身のケースに合う数字を残してください。

  4. 4
    ステップ4: コピーまたは保存する

    結果をコピーするかダウンロードします。重要な判断の前には、公式の情報源や専門家に確認してください。

このツールについて

Clip-path は,開発者が Photoshop や SVG マスクを必要とせずに正確な幾何学的多角形や形状に HTML エレメントや画像をカットすることができます.一般的なプリセットから選択し,レンダリングされたマスクをリアルタイムで検査し,生産準備の良い純粋な CSS 多角座標をコピーします.

最良の結果を得るためのヒント

始める前にオプションを少し読み、まず小さな例でツールを試してください。すべてはお使いの端末のブラウザ内で動作し、入力や追加したものはアップロードされず、タブを閉じるとすべて消去されます。おかしいと感じたらページを再読み込みしてもう一度試すか、このページの報告リンクから問題を教えてください。結果がまだおかしい場合は、値をひとつずつ変えて、どの項目が最も影響するかを確認してください。再び使う場合はこのページをブックマークしてください。

ポイント

よくある質問

CSSのクリップパスとは?

The `clip-path` CSS property creates a clipping region that determines which parts of an element or image are visible.

プリセットとして含まれている形は何ですか?

プリセットには三角形,六角形,5点星,商品割引バッジ,ナビゲーションシェブロン,円面マスクが含まれます.

これで写真やビデオを撮ってもいいですか?

Yes. Apply the generated clip-path CSS rule to any `<img>`, `<video>`, `<div>`, or card component in your stylesheet.

クリップパスで要素クリック可能なヒットボックスに影響する?

現代のブラウザでは,要素の可視でカットされていない領域だけがポインタホバーとクリックイベントに反応します.

完全無料料金なし、登録なし
ファイルはプライベートすべてブラウザ内で動作します
あなたの言語で使いやすく多くの言語に対応