CSS clip-path

बहुभुज हैंडल ड्रैग → polygon() कोड

आकृतियाँ

4 points

बिंदु #1

X %

Y %

Editor (drag handles)

Preview

CSS

clip-path: polygon(50.0% 0.0%, 100.0% 50.0%, 50.0% 100.0%, 0.0% 50.0%);

कैसे उपयोग करें

चुनें
Drag the circular handles to reposition each vertex of the polygon.
Add a new point (inserted at the midpoint of the selected edge) or remove the selected point.
Fine-tune exact X/Y percentages in the coordinate inputs.
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.

उत्पादन में उपयोग से पहले आउटपुट सत्यापित करें। कोई वारंटी नहीं — देखें शर्तें.