Do I need to install anything to use CSS Clip-Path Generator?

No installation needed. CSS Clip-Path Generator works directly in any modern web browser, Chrome, Firefox, Safari, or Edge.

Can I copy the generated CSS code?

Yes, all generated code can be copied to your clipboard with one click and used directly in your projects.

Is clip-path supported in all browsers?

clip-path is supported in all modern browsers. The basic polygon, circle, ellipse, and inset values work universally in Chrome, Firefox, Safari, and Edge.

CSS क्लिप-पाथ जनरेटर · Polygon, Circle, Ellipse

आकार का प्रकार

लाइव पूर्वावलोकन

जनरेट किया गया CSS

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

आकार का प्रकार चुनें: बहुभुज, वृत्त, दीर्घवृत्त या inset (वैकल्पिक गोल कोनों के साथ आयत)।
नियंत्रण बिंदु खींचें: मास्क क्षेत्र को सटीक रूप से अनुकूलित करने के लिए पूर्वावलोकन पर आकार के हैंडल स्थानांतरित करें।
CSS कॉपी करें: जनरेट किया गया clip-path प्रॉपर्टी मान आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार है।

CSS clip-path जनरेटर क्यों इस्तेमाल करें?

CSS clip-path एक परिभाषित क्षेत्र के बाहर सब कुछ मास्क करके गैर-आयताकार आकार बनाता है। विभाजकों, बैज और रचनात्मक लेआउट के लिए उपयोग होता है।

विशेषताएँ

बहुभुज संपादक: कोई भी आकार बनाने के लिए शीर्ष जोड़ें, स्थानांतरित करें और हटाएँ।
अंतर्निहित प्रीसेट: विकर्ण, शेवरॉन, षट्कोण, तारा, त्रिभुज और अन्य सामान्य आकार।
वृत्त और दीर्घवृत्त मोड: गोलाकार या दीर्घवृत्ताकार मास्क के लिए दृश्य नियंत्रण।
Inset मोड: प्रत्येक कोने के लिए व्यक्तिगत border-radius के साथ आयताकार मास्क बनाएँ।
मास्क किए गए क्षेत्र का पूर्वावलोकन: मास्क किया गया भाग हाइलाइट में देखें ताकि पता चले क्या छिपाया जाएगा।

अक्सर पूछे जाने वाले प्रश्न

क्या clip-path क्लिक करने योग्य क्षेत्रों को प्रभावित करता है?

हाँ। डिफ़ॉल्ट रूप से, पॉइंटर इवेंट केवल मास्क क्षेत्र के अंदर पंजीकृत होते हैं, मास्क किया गया क्षेत्र अदृश्य और क्लिक करने योग्य दोनों नहीं होता है। तत्व को दृष्टिगत रूप से मास्क करते हुए पूरी तरह क्लिक करने योग्य बनाने के लिए, तत्व पर pointer-events: all का उपयोग करें या एक पारदर्शी परत ओवरले करें।

क्या मैं clip-path को एनिमेट कर सकता हूँ?

हाँ, clip-path को CSS ट्रांज़िशन और एनिमेशन का विषय बनाया जा सकता है। सुचारू मॉर्फिंग प्रभाव के लिए समान संख्या में बिंदुओं वाले दो बहुभुजों के बीच एनिमेट करें। विभिन्न संख्या में बिंदुओं वाले आकार इंटरपोलेशन के बजाय कूद से एनिमेट होंगे।

क्या clip-path सभी ब्राउज़रों द्वारा समर्थित है?

clip-path सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। url(#id) सिंटैक्स के माध्यम से SVG आकृतियों के लिए, समर्थन और भी व्यापक है। मूल polygon, circle, ellipse और inset मान Chrome, Firefox, Safari और Edge पर सार्वभौमिक रूप से काम करते हैं।

CSS क्लिप-पाथ जनरेटर