CSS clip-path जनरेटर

CSS clip-path जनरेटर क्या है?

CSS clip-path जनरेटर CSS clip-path प्रॉपर्टी के लिए एक मुफ़्त विज़ुअल एडिटर है, जो उन फ्रंट-एंड डेवलपर्स और डिज़ाइनरों के लिए बनाया गया है जो तत्वों को गैर-आयताकार आकारों में काटना चाहते हैं। ड्रॉपडाउन से एक प्रीसेट चुनें — त्रिज्या और केंद्र बिंदु के साथ circle() और ellipse(), जितने चाहें उतने शीर्ष बिंदुओं के साथ polygon(), चार किनारा ऑफ़सेट वाला inset(), या कोने की त्रिज्या वाला rounded inset() रूप। हर पैरामीटर एक प्रतिशत है जो संख्या इनपुट के ज़रिए दर्ज होता है, और शतरंजपट्ट पृष्ठभूमि वाला एक पूर्वावलोकन बॉक्स परिणामी आकार को रियल टाइम में दिखाता है। पूरा clip-path CSS आपके कॉपी करने के लिए तैयार होता है। इसका उपयोग छवियों को मास्क करने, विकर्ण सेक्शन विभाजक काटने, षट्भुज अवतार बनाने, या निर्देशांक हाथ से गिने बिना स्पीच-बबल आकार गढ़ने के लिए करें।

CSS clip-path जनरेटर का उपयोग कैसे करें

1. प्रीसेट ड्रॉपडाउन से एक आकार चुनें: circle, ellipse, polygon, inset या round।
2. circle या ellipse के लिए, त्रिज्या (या X/Y त्रिज्याएँ) और केंद्र की X/Y स्थिति प्रतिशत में सेट करें।
3. polygon के लिए, हर शीर्ष का X और Y प्रतिशत संपादित करें; और शीर्ष जोड़ने के लिए बिंदु जोड़ें पर क्लिक करें और मानों को संपादित करके पुनः क्रमित करें।
4. inset या round के लिए, ऊपर, दाएँ, नीचे और बाएँ ऑफ़सेट सेट करें; round एक कोने की त्रिज्या भी लेता है।
5. टाइप करते समय लाइव पूर्वावलोकन को बॉक्स काटते हुए देखें।
6. तैयार clip-path CSS कॉपी करें और इसे अपनी स्टाइलशीट में पेस्ट करें।

उदाहरण

प्रीसेट circle, त्रिज्या 50%, केंद्र 50% 50%

clip-path: circle(50% at 50% 50%);

प्रीसेट polygon, बिंदु (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

प्रीसेट round, सभी ओर inset 10%, कोने की त्रिज्या 20%

clip-path: inset(10% 10% 10% 10% round 20%);

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

clip-path किसके लिए उपयोग होता है?

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

polygon प्रीसेट कैसे काम करता है?

polygon() X/Y शीर्ष बिंदुओं की सूची को क्रम में जोड़कर एक आकार बनाता है। हर बिंदु के प्रतिशत मान संपादित करें, और अधिक शीर्ष डालने के लिए बिंदु जोड़ें का उपयोग करें; अंतिम बिंदु अपने आप पहले बिंदु से जुड़ जाता है। आकार वैध बना रहे, इसके लिए कम से कम तीन बिंदु रखे जाते हैं।

मान प्रतिशत में क्यों होते हैं?

प्रतिशत क्लिप को तत्व के साथ स्केल होने देते हैं, इसलिए वही clip-path किसी भी आकार में काम करता है। 0% तत्व के बॉक्स का बायाँ या ऊपरी किनारा है और 100% दायाँ या निचला किनारा है।

round प्रीसेट क्या जोड़ता है?

round प्रीसेट round कोने की त्रिज्या के साथ inset() का उपयोग करता है, जो हर ओर से अंदर की ओर कटा और गोल कोनों वाला एक आयत बनाता है — ऐसी कोमल फ़्रेमयुक्त कटाई के लिए उपयोगी, जिसे साधारण border-radius किसी inset क्लिप के साथ नहीं जोड़ सकता।

क्या मेरा डेटा कहीं भेजा जाता है?

नहीं। यह जनरेटर पूरी तरह आपके ब्राउज़र में JavaScript के साथ चलता है — आपके आकार के मान कभी आपके डिवाइस से बाहर नहीं जाते, इसलिए यह निजी रूप से काम करता है और पेज लोड होने के बाद ऑफ़लाइन भी।