DAs Gaming

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

CLIP PATH BUILDER

頂点を編集

3〜20頂点

座標は要素の左上を0%、右下を100%として指定します。

LIVE PREVIEW

プレビュー

生成されたCSS

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

CSS clip-path polygonジェネレーターについて

clip-pathは要素の表示領域を切り抜くCSSプロパティです。polygon()の頂点を編集し、画像やカードを三角形・矢印・多角形などの形に整えられます。

主な機能

使い方

  1. プリセットを選ぶか、頂点のX・Y座標を編集します。
  2. 頂点を追加して形状を細かく調整できます。
  3. コピーを押してCSSへ貼り付けます。

プライバシー

入力値とプレビューはブラウザ内だけで処理され、外部へ送信されません。