CSS Clip-Path ジェネレーター
「CSS Clip-Path ジェネレーター」はコード、データと QRに使えるブラウザツールです。入力内容と結果は通常この端末内で処理され、登録は必要ありません。
Choosing a preset replaces the point list. Select Keep custom points before editing freely.
The preview color is not part of the copied clip-path declaration.
One point per line as X, Y percentages from 0 through 100. Use 3 to 12 points. The first and last points connect automatically.
Percentages resolve against the element’s border box. Concave polygons are allowed; self-intersecting paths and edge rendering can differ between browsers. Use a fallback shape or unclipped content when older browser support matters.
使い方
使い方
- Select a common polygon preset or keep custom points.
- Edit up to 12 X, Y percentage points and review the clipped shape as it changes.
- Copy the generated clip-path CSS and test it with your own element and browser support requirements.
Editable percentage polygons
Triangle, diamond, hexagon, and five-point star presets provide practical starting points. Choose Keep custom points to edit the list directly. Each nonempty line must contain X, Y from 0 through 100, and the focused editor accepts three through twelve points so the output stays understandable and reviewable.
Rendering and support boundaries
CSS resolves polygon percentages against the clipped element’s border box. Concave paths are valid, but self-intersecting polygons can use browser-specific fill behavior and anti-aliasing at edges can vary. CSS clip-path support is strong in current browsers but may be unavailable or limited in older browsers; keep meaningful content available without relying on the clipped outline alone.
よくある質問
あわせて知りたいこと
What box do the percentages use?
For this generated CSS polygon, percentages resolve against the element’s border box. A 50%, 50% point is the visual center of that box before clipping.
Can I make a concave or self-intersecting shape?
Concave polygons are supported. Self-intersecting paths may render differently across engines, so inspect the target browsers and prefer a simpler polygon when consistent output matters.
Does this export SVG or an image?
No. It creates a CSS clip-path declaration and a local preview only. Apply the copied CSS to an existing HTML element or use a dedicated vector tool when you need an SVG path.