CSS clip-path ビジュアライザー
スライダーや頂点編集で好きな形を作って clip-path の使い方を体感しよう
- 頂点 1
- 頂点 2
- 頂点 3
.element {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}使い方
- プリセットをクリックしてサンプル形状を読み込もう
- タブで inset / circle / ellipse / polygon を切り替えて各関数を試そう
- スライダーを動かすとリアルタイムでプレビューが変化する
- polygon では頂点の X/Y を編集したり、頂点を追加・削除できる
- 「📋 CSSをコピー」で生成されたコードを自分のスタイルシートに貼り付けよう