CSS clip-path

使用方法

1. Select a preset shape or start with the default polygon in the SVG editor。
2. Drag the circular handles to reposition each vertex of the polygon。
3. Add a new point (inserted at the midpoint of the selected edge) or remove the selected point。
4. Fine-tune exact X/Y percentages in the coordinate inputs。
5. Copy the generated clip-path CSS and paste it into your stylesheet。

範例

• Dragging a triangle handle to 50% 0%, 0% 100%, 100% 100% produces clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%)。
• Adding a point on the right edge of a rectangle and pulling it outward creates an arrow shape in real time。