Geometric Shape Presets
Polygon Vertices (3)
Point 1
X Axis50%
Y Axis0%
Point 2
X Axis0%
Y Axis100%
Point 3
X Axis100%
Y Axis100%
Canvas Preview Options
Show Vertex Points & Outlines
Real-Time Clipped Canvas
Clipped Visual
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path作成の手順
- 1プリセット（三角形、六角形、星形、矢印など）を選択するか新規作成します。
- 2キャンバス上の頂点ハンドルをドラッグして自由な多角形に変形します。
- 3完成した `clip-path: polygon(...)` CSSルールをコピーします。
GPUハードウェアアクセラレーションによる高速描画
CSS `clip-path` はブラウザのコンポジター層でハードウェア加速されるため、重い画像マスクよりも遥かに高速で滑らかにレンダリングされます。
Architecture & Privacy
- Full WebKit Vendor Prefixes: Includes standard clip-path and -webkit-clip-path for complete iOS Safari support.
- Polygon percentage coordinates: Scales responsively with any aspect ratio container.
- SVG Vector Wireframe Overlay: Shows numbered anchor points and connect lines in real time.
- Zero runtime library overhead: Pure client-side calculations rendered directly through the CSS engine.
よくある質問 (FAQ)
関連開発ツール
Popular
すりガラス効果 (Glassmorphism) 生成
リアルタイムプレビューとWebKitプレフィックス付きCSSコード生成
Launch tool→
Popular
多重ボックスシャドウ (box-shadow) 生成
滑らかで自然な多層シャドウ、インセット陰影、光彩エフェクトのCSS作成
Launch tool→
Trending
グラデーション背景生成
線形(Linear)、放射状(Radial)、円錐(Conic)グラデーションの視覚的ビルダー
Launch tool→
8点角丸 (border-radius) 生成
8箇所の制御ポイントで有機的なブロブ（有機曲線）形状を自在にデザイン
Launch tool→