CSS 多角形 clip-path ジェネレーター

頂点をドラッグまたは数値で編集し、多角形の切り抜き形状を確認して CSS を出力します。

点をドラッグするか矢印キーで調整できます。Shift で移動幅が大きくなります。座標の直接入力も可能です。

CSS

基本の形

三角形ひし形六角形星形斜めカット

このブラウザー内で処理します。アップロードや保存は行いません。

このツールについて

斜めのパネルや多角形のバッジを、画像マスクなしで設計できます。

デザイン

三角形、ひし形、六角形などのプリセットを選び、頂点の位置をドラッグするか X・Y の割合を入力します。頂点の追加・削除も可能です。Tab で頂点に移動して矢印キーで微調整でき、Shift を押すと移動幅が大きくなります。

頂点は 3～32 個、座標は 0～100% です。一覧の順に結び、最後に閉じた多角形になります。プレビューと同じ clip-path: polygon(...) をコピー・保存できます。曲線のパスや切り抜き後の画像は出力しません。

3〜32頂点の多角形が対象で、各座標は 0%〜100% です。曲線や範囲外の頂点には対応していません。

点は一覧の順に結ばれ、最後の点から最初の点へ閉じます。点をほかの辺の向こうへ動かすと、輪郭が自己交差することがあります。プリセットを基に周囲をたどる順番で調整し、不要な点は削除してください。ただし最低 3 点は必要です。

してディスカッションに参加してください。

コメントはまだありません。