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

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

1. आकार का प्रकार चुनें: बहुभुज, वृत्त, दीर्घवृत्त या inset (वैकल्पिक गोल कोनों के साथ आयत)।
2. नियंत्रण बिंदु खींचें: मास्क क्षेत्र को सटीक रूप से अनुकूलित करने के लिए पूर्वावलोकन पर आकार के हैंडल स्थानांतरित करें।
3. 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 clip-path वास्तव में क्या करता है

CSS clip-path गुण एक तत्व को चुने हुए आकार में मास्क करता है: आकार के अंदर सब कुछ दिखाई देता है, बाहर सब कुछ पारदर्शी हो जाता है। तत्व का लेआउट बॉक्स अपरिवर्तित रहता है (यह अभी भी मार्जिन कोलैप्स, फ्लो और भाई-बहन की स्थिति के लिए उसी आयत में रहता है), लेकिन केवल क्लिप क्षेत्र के अंदर के पिक्सेल ही खींचे जाते हैं। यह clip-path को क्रॉपिंग (जो छवि को स्थायी रूप से बदलता है) और पोजिशनिंग (जो चीजों को इधर-उधर ले जाता है) से अलग बनाता है: clip-path एक प्रदर्शन-समय पर लागू मास्क है, ठीक उससे पहले कि पिक्सेल स्क्रीन पर पहुँचें।

चार बुनियादी आकार फ़ंक्शन हैं: polygon() (शीर्षों की सूची प्रतिशत या पिक्सेल निर्देशांक के रूप में), circle() (त्रिज्या प्लस एक केंद्र), ellipse() (दो त्रिज्या प्लस एक केंद्र) और inset() (प्रत्येक किनारे से मापा गया एक आयत, वैकल्पिक रूप से गोल कोनों के साथ)। इन चार के लिए बहुत जटिल आकृतियों (अनियमित वक्र, अवतल इंडेंट के साथ तारे, सुलेख रूपरेखा) के लिए, clip-path path() के माध्यम से एक SVG पथ या url(#id) के माध्यम से एक SVG <clipPath> तत्व के संदर्भ को भी स्वीकार करता है। ब्राउज़र तत्व को चित्रित करता है, फिर इसे आपके आकार द्वारा परिभाषित अल्फा मास्क के माध्यम से कंपोज़ करता है।

clip-path आधुनिक वेब डिज़ाइन के लिए महत्वपूर्ण है क्योंकि यह उन आकारों को सक्षम करता है जिनके लिए एक दशक पहले छवि संपादकों की आवश्यकता होती थी। एक विकर्ण अनुभाग विभाजक, एक षट्कोणीय छवि क्रॉप, एक शेवरॉन बैनर, एक तारे के आकार की तस्वीर: सब अब शुद्ध CSS में संभव, किसी भी आकार में स्केलेबल, होवर पर एनिमेटेबल और पहुँच योग्य क्योंकि अंतर्निहित तत्व अभी भी HTML है, रास्टराइज़्ड छवि नहीं। ट्रेड-ऑफ शब्दाडंबर है: हाथ से एक साधारण हीरे के लिए polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) लिखना संभव है, लेकिन 12-शीर्ष वाला तारा या कस्टम लोगो कटआउट विज़ुअल संपादक के बिना अव्यवहारिक है। यहाँ यह जनरेटर फिट होता है।

यह उपकरण पर्दे के पीछे कैसे काम करता है

पूर्वावलोकन एक div है जिसमें आपका चुना हुआ clip-path इनलाइन CSS के रूप में लागू होता है, नियंत्रण हैंडल के प्रत्येक खींचने पर अपडेट होता है। हैंडल पूर्वावलोकन के शीर्ष पर प्रत्येक शीर्ष के प्रतिशत निर्देशांक पर ओवरले किए गए पूर्ण स्थिति वाले वृत्त हैं। जब आप एक हैंडल खींचते हैं, JavaScript mousemove (या touchmove) इवेंट को कैप्चर करता है, पिक्सेल स्थिति को पूर्वावलोकन क्षेत्र के प्रतिशत में परिवर्तित करता है, इन-मेमोरी पॉलीगॉन में उस शीर्ष को अपडेट करता है, और clip-path स्ट्रिंग को फिर से लागू करता है। रीयल-टाइम रेंडरिंग का मतलब है कि आप खींचने के दौरान आकार बदलते देखते हैं, बाद में नहीं।

उत्पन्न CSS शीर्षों को पॉलीगॉन स्ट्रिंग में जोड़कर बनाया जाता है: पॉलीगॉन मोड के लिए polygon(x1% y1%, x2% y2%, ...), या सरल आकार प्रकारों के लिए circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius)। पिक्सेल मानों के बजाय प्रतिशत मानों का उपयोग किया जाता है क्योंकि प्रतिशत स्वचालित रूप से तत्व के साथ स्केल करते हैं: एक पॉलीगॉन जो 300x200 पर सही दिखता है, CSS में कोई बदलाव किए बिना 600x400 पर भी सही दिखता है। कोड बॉक्स प्रत्येक इंटरैक्शन पर अपडेट होता है, और CSS कॉपी करें बटन वर्तमान मान को आपके क्लिपबोर्ड में लिखता है।

आपके ब्राउज़र से कुछ भी नहीं निकलता। पूर्वावलोकन, आकार गणना, CSS निर्माण और क्लिपबोर्ड कॉपी सभी क्लाइंट-साइड JavaScript हैं। कोई नेटवर्क अनुरोध नहीं किया जाता; कोई छवि अपलोड नहीं की जाती; आपकी आकार पसंद पर कोई विश्लेषण नहीं। टूल में पहली लोड पर एक बार परोसे गए स्थिर HTML और JavaScript से परे कोई बैकएंड नहीं है। उपयोग के दौरान ब्राउज़र का नेटवर्क टैब खोलें और आप प्रारंभिक पृष्ठ लोड के बाद शून्य अनुरोध देखेंगे। आपके द्वारा उत्पन्न CSS आपका है किसी भी स्टाइलशीट में पेस्ट करने के लिए।

CSS क्लिपिंग का संक्षिप्त इतिहास

• SVG clipPath, 2001।SVG 1.0 विशिष्टता (W3C अनुशंसा, सितंबर 2001) <clipPath> पेश करती है, जो किसी भी SVG तत्व को दूसरे आकार से मास्क करने की अनुमति देती है। SVG क्लिपिंग जटिल पथों को संभालती है लेकिन इनलाइन SVG मार्कअप की आवश्यकता होती है, SVG प्रवाह के बिना सादे HTML पृष्ठों में पुन: उपयोग सीमित करती है।
• CSS clip गुण, 1998 से 2010 का दशक।मूल CSS clip गुण (CSS 2 विशिष्टता, 1998) केवल rect() का समर्थन करता था, पूर्ण-स्थित तत्वों पर चार-मान आयताकार क्लिप। 2014 तक सीमित और बहिष्कृत, लेकिन अभी भी विरासत 'केवल स्क्रीन रीडर' CSS पैटर्न में देखा जाता है जहाँ दृश्यमान सामग्री को पहुँच के लिए 1x1 पिक्सेल पर क्लिप किया जाता है।
• CSS Masking Module Level 1, 2014।W3C CSS Masking Module Level 1 विशिष्टता (अप्रैल 2014) प्रकाशित करता है, polygon, circle, ellipse, inset और SVG-path समर्थन के साथ आधुनिक clip-path गुण पेश करता है। Chrome 24 (जनवरी 2013) और Safari 7 (जून 2013) औपचारिक विशिष्टता से पहले मूल आकार जहाज भेजते हैं; Firefox संस्करण 54 में अनुसरण करता है (जून 2017)।
• Adobe ब्रुटलिस्ट वेब डिज़ाइन लहर, 2015 से 2017।विकर्ण कटौती के साथ हीरो अनुभाग, कोणीय बैनर विभाजक और षट्कोणीय टीम-फोटो ग्रिड एक डिज़ाइन प्रवृत्ति बन जाते हैं, Webflow जैसे टूल और CSS-Tricks पर डिज़ाइन लेखों द्वारा संचालित। Awwwards-शैली पोर्टफोलियो प्रमुखता से clip-path तरकीबें दिखाते हैं, और गुण «अस्पष्ट CSS जिज्ञासा» से «अपेक्षित आधुनिक तकनीक» में बदल जाता है।
• Internet Explorer मरता है, 2022।Microsoft 15 जून, 2022 को Internet Explorer को सेवानिवृत्त करता है, clip-path सहित आधुनिक CSS सुविधाओं के लिए अंतिम सार्थक ब्राउज़र बाधा समाप्त करता है। 2023 तक, «clip-path का समर्थन करता है?» गंभीर क्रॉस-ब्राउज़र चिंता बंद हो जाती है, और गुण केवल-CSS डिज़ाइन में एक डिफ़ॉल्ट उपकरण बन जाता है।
• CSS shape() फ़ंक्शन, 2024 और उसके बाद।CSS Shapes Module shape() (SVG पथ स्ट्रिंग्स के बजाय CSS-अनुकूल सिंटैक्स का उपयोग करके path() का अधिक लचीला विकल्प) जैसे प्रस्तावों के साथ विकसित होता रहता है, SVG संदर्भ-स्विच के बिना जटिल आकृतियों को सक्षम करता है। ब्राउज़र समर्थन 2025 और 2026 के माध्यम से रोल आउट हो रहा है।

वास्तविक दुनिया के कार्यप्रवाह

• हीरो सेक्शन विकर्ण कटौती।«ट्रेपोज़ॉइड हीरो» पैटर्न जहाँ एक हीरो सेक्शन का निचला किनारा क्षैतिज के बजाय विकर्ण रूप से कोणीय होता है, सबसे लोकप्रिय clip-path उपयोगों में से एक है। एक सरल polygon(0 0, 100% 0, 100% 90%, 0 100%) 10% नीचे-बाएं से ऊपर-दाएं ढलान बनाता है। उल्टे ढलान के साथ नीचे एक दूसरा सेक्शन जोड़ें और आपको एक «फटे हुए कागज» या «स्तरित कोण» लेआउट मिलता है जो किसी भी छवि की आवश्यकता के बिना जानबूझकर महसूस होता है।
• षट्कोणीय अवतार ग्रिड।टीम पृष्ठ, योगदानकर्ता सूचियाँ या खेल रोस्टर अक्सर गोल अवतारों के अधिक गतिशील विकल्प के रूप में षट्कोणीय फोटो क्रॉप का उपयोग करते हैं। एक छह-शीर्ष पॉलीगॉन clip-path षट्भुज बनाता है; CSS ग्रिड स्तब्ध हनीकॉम्ब लेआउट की व्यवस्था करता है। Photoshop में क्रॉपिंग की तुलना में, फ़ोटो मूल और असंशोधित रहते हैं: एकल CSS संपादन के साथ हेक्स ओरिएंटेशन बदलें या मंडलों में स्वैप करें।
• होवर छवि प्रकट प्रभाव।होवर पर clip-path एनिमेट करना «छवि प्रकटीकरण» बनाता है जहाँ एक क्लिप किया गया हिस्सा सुचारू रूप से फैलता है। सामान्य पैटर्न: एक छवि एक छोटे वृत्त के रूप में शुरू होती है और होवर पर पूर्ण कवरेज तक फैलती है, या एक पॉलीगॉन एक पतले स्लैश के रूप में शुरू होता है और पूर्ण आयत में बढ़ता है। clip-path पर CSS संक्रमण समान शीर्ष गणना वाले दो पॉलीगॉन के बीच सुचारू रूप से इंटरपोलेट करता है, JavaScript के बिना 60fps एनीमेशन उत्पन्न करता है।
• कस्टम बटन आकार।गेम UI, भविष्यवादी इंटरफेस और रचनात्मक पोर्टफोलियो अक्सर गैर-आयताकार बटन (तीर आकार, षट्भुज, समांतर चतुर्भुज) का उपयोग करते हैं। clip-path एक मानक बटन तत्व को चुने हुए आकार में मास्क करता है, अंतर्निहित बटन को सुलभ रखता है (अभी भी फोकस करने योग्य, अभी भी कीबोर्ड द्वारा क्लिक करने योग्य, अभी भी स्क्रीन रीडर द्वारा घोषित करने योग्य) जबकि एक कस्टम विज़ुअल प्रस्तुत करता है।
• सजावटी अनुभाग विभाजक।वेव विभाजक, शेवरॉन विभाजक और पृष्ठ अनुभागों के बीच «फटे पृष्ठ» विभाजक को पृष्ठभूमि SVG छवियों या प्रति अनुभाग छवियों की आवश्यकता होती थी। clip-path उन्हें या तो गोल कोनों के साथ एक inset या वांछित लहर का अनुसरण करने वाले पॉलीगॉन का उपयोग करके शुद्ध CSS में उत्पन्न करता है। विभाजक स्केल और लेआउट परिवर्तनों के लिए स्वचालित रूप से प्रतिक्रिया करते हैं।
• रचनात्मक फोटो दीर्घाएँ।एकसमान आयताकार थंबनेल का उपयोग करने वाले फोटो गैलरी लेआउट सामान्य महसूस होते हैं; प्रत्येक थंबनेल को थोड़े अलग पॉलीगॉन आकार में क्लिप करना प्रत्येक छवि को मैन्युअल रूप से मास्क किए बिना एक हस्त-कटा कोलाज की भावना उत्पन्न करता है। ग्रिड के माध्यम से चक्रित 3 से 5 पॉलीगॉन वेरिएंट का एक छोटा सेट प्रदर्शन (समान आकार बस विभिन्न छवि स्रोतों पर ट्रांसफ़ॉर्म-लागू है) रखते हुए दृश्य लय बनाता है।

सामान्य नुकसान और उनका क्या मतलब है

• clip-path लेआउट नहीं बदलता।एक सामान्य आश्चर्य: एक तत्व को छोटे आकार में क्लिप करना दस्तावेज़ प्रवाह में लेने वाले स्थान को कम नहीं करता। तत्व अभी भी अपना पूर्ण लेआउट बॉक्स घेरता है; clip-path केवल जो खींचा जाता है उसे बदलता है। एक तत्व प्राप्त करने के लिए जो भौतिक रूप से कम जगह लेता है, आपको इसका आकार भी बदलना होगा। यदि आप चाहते हैं कि क्लिप की गई सामग्री वास्तव में क्रॉप हो, एक रैपर पर overflow: hidden का उपयोग करें, या छोटे लेआउट बॉक्स के साथ CSS mask का उपयोग करें।
• पहलू-अनुपात बेमेल प्रतिशत निर्देशांक को तोड़ता है।प्रतिशत के रूप में व्यक्त पॉलीगॉन निर्देशांक तत्व के साथ समान रूप से स्केल करते हैं। एक हीरे का आकार polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) किसी भी आकार में एक हीरा रहता है, लेकिन यदि तत्व का पहलू अनुपात बदलता है तो यह एक चौड़ा या लंबा रोम्बस बन जाता है। पहलू अनुपातों में दृष्टिगत रूप से सुसंगत रहने वाले आकारों के लिए, पिक्सेल मानों या min(50vw, 50vh) गणनाओं का उपयोग करें, या aspect-ratio CSS गुण के साथ तत्व के पहलू-अनुपात को सीमित करें।
• क्लिप किए गए क्षेत्र क्लिक करने योग्य नहीं हैं।पॉइंटर इवेंट केवल वहाँ रजिस्टर करते हैं जहाँ क्लिपिंग के बाद तत्व दृश्यमान है। एक त्रिकोण में क्लिप किया गया बटन केवल त्रिकोण पर क्लिक करने योग्य है, उस अदृश्य आयताकार स्थान पर नहीं जो वह घेरता है। यह आमतौर पर वांछित है (खाली स्थान पर कोई आकस्मिक क्लिक नहीं), लेकिन भ्रामक हो सकता है जब कई क्लिप किए गए बटन ओवरलैप करते हैं या जब इंटरैक्टिव सामग्री दृष्टिगत रूप से क्लिप क्षेत्र के बाहर फैलती है।
• कई क्लिप किए गए तत्वों को एनिमेट करना महंगा है।clip-path प्रत्येक एनीमेशन फ्रेम पर कंपोज़िटिंग ट्रिगर करता है, जो फ़्रेम दर को गिरा सकता है यदि एक साथ कई तत्वों या बड़े तत्वों (पूर्ण-स्क्रीन हीरो अनुभाग) पर लागू किया जाए। 60fps एनीमेशन के लिए, एक साथ-एनिमेटिंग क्लिप किए गए तत्वों की संख्या सीमित करें, सरल आकार पसंद करें (20-शीर्ष पर 4 से 6-शीर्ष पॉलीगॉन), और उन तत्वों पर CSS will-change: clip-path का उपयोग करने पर विचार करें जिन्हें आप एनिमेट करने की योजना बनाते हैं ताकि ब्राउज़र को GPU-त्वरित करने का संकेत दें।
• मॉर्फ करने के लिए पॉलीगॉन को मिलते-जुलते शीर्ष गणना की आवश्यकता होती है।दो पॉलीगॉन आकारों के बीच clip-path एनिमेट करना केवल तभी काम करता है जब दोनों पॉलीगॉन में समान संख्या में शीर्ष हों। एक त्रिकोण (3 बिंदु) से एक वर्ग (4 बिंदु) में जाना सुचारू रूप से मॉर्फ करने के बजाय तुरंत स्नैप करता है। अलग-अलग दृश्य जटिलता के आकारों के बीच सुचारू मॉर्फिंग के लिए, दोनों पॉलीगॉन को समान संख्या के बिंदुओं के साथ परिभाषित करें, अतिरिक्त को उन निर्देशांकों पर रखें जो आकारों में से एक पर «छिपाते» हैं (जैसे, एक के ऊपर एक दो बिंदु)।
• Safari को SVG पथ सिंटैक्स के लिए -webkit- उपसर्ग की आवश्यकता है।मूल आकार (polygon, circle, ellipse, inset) सभी आधुनिक ब्राउज़रों में बिना उपसर्ग के काम करते हैं। लेकिन path() फ़ंक्शन का उपयोग करते समय या url(#id) SVG clipPaths का संदर्भ देते समय Safari को अभी भी -webkit-clip-path उपसर्ग की आवश्यकता होती है। क्रॉस-ब्राउज़र संगतता के लिए, SVG-पथ आधारित क्लिपिंग के लिए -webkit-clip-path और clip-path दोनों को समान मान के साथ घोषित करें। ऑटो-प्रीफ़िक्सर (Autoprefixer, PostCSS) आधुनिक बिल्ड सेटअप में इसे स्वचालित रूप से संभालते हैं।

गोपनीयता: सब कुछ आपके ब्राउज़र में चलता है

CSS जनरेटर उपकरण पारंपरिक रूप से दो शिविरों में आते हैं: क्लाइंट-साइड JavaScript के साथ सरल HTML पृष्ठ (निजी, तेज़, खाते की आवश्यकता नहीं) और क्लाउड-सेव्ड परियोजनाओं के साथ पूर्ण-विशेषताओं वाले संपादक (सहयोगी, लेकिन प्रत्येक आकार संपादन किसी और के सर्वर पर लॉग हो जाता है)। यह उपकरण दृढ़ता से पहले शिविर में है। आपके द्वारा खींची गई पॉलीगॉन निर्देशांक, आपके द्वारा चुने गए रंग, आपके द्वारा कॉपी किया गया CSS: सभी आपके ब्राउज़र सत्र में रहते हैं, कभी भी कहीं भी नहीं भेजे जाते। पृष्ठ रिफ्रेश करें और स्थिति चली जाती है जब तक आपने पहले CSS कॉपी नहीं किया।

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

जब कोई दूसरा उपकरण सही विकल्प हो

• जटिल पथों के लिए SVG संपादक।अनियमित वक्रों, सुलेख आकारों या मूल आकार फ़ंक्शन से परे किसी भी चीज़ के लिए, Figma, Inkscape या Adobe Illustrator में आकार बनाना और SVG पथ के रूप में निर्यात करना हाथ से clip-path निर्देशांक कोडिंग की तुलना में अधिक व्यावहारिक है। फिर clip-path: path('M...') का उपयोग करें या ID द्वारा SVG को संदर्भित करें। SVG संपादक बेज़ियर हैंडल और सटीकता प्रदान करते हैं; clip-path जनरेटर नहीं करते।
• अल्फा सम्मिश्रण और ग्रेडिएंट के लिए CSS mask।clip-path एक बाइनरी अल्फा (पूरी तरह से दृश्यमान या पूरी तरह से क्लिप) उत्पन्न करता है। नरम-धार आकारों (ग्रेडिएंट फेड, एंटी-एलियाज़्ड वक्र, आंशिक पारदर्शिता) के लिए, CSS mask या mask-image पूर्ण अल्फा ग्रेडिएंट को संभालता है। mask एक मास्क छवि (कोई भी PNG, SVG या ग्रेडिएंट) का समर्थन करता है जहाँ काले पिक्सेल छिपाते हैं और सफेद पिक्सेल दिखाते हैं, ग्रे के साथ आंशिक अपारदर्शिता देते हैं। clip-path ऐसा नहीं कर सकता।
• स्थायी क्रॉप के लिए छवि प्रसंस्करण।यदि आप चाहते हैं कि अंतिम छवि फ़ाइल स्वयं एक आकार में क्रॉप हो (छोटा फ़ाइल आकार, कोई clip-path ओवरहेड नहीं, अनक्लिप्ड फ़ॉलबैक का कोई जोखिम नहीं), छवि संपादक या हमारे Image Compressor उपकरण में क्रॉप करें। clip-path HTML तत्वों पर प्रदर्शन-समय मास्किंग के लिए है; यदि लक्ष्य एक स्थिर छवि संपत्ति है, फ़ाइल को सीधे क्रॉप करें।
• डिज़ाइन मॉकअप के लिए Figma या Sketch।एक लेआउट का प्रोटोटाइप करते समय, Figma के वेक्टर टूल clip-path हैंडल खींचने की तुलना में जटिल आकार अन्वेषण को तेज़ी से संभालते हैं। आप जो आकार चाहते हैं उसे खोजने के लिए डिज़ाइन उपकरण का उपयोग करें, फिर उत्पादन के लिए अंतिम आकार को clip-path CSS में अनुवादित करें। डिज़ाइन उपकरण रीयल-टाइम CSS जनरेटर की तुलना में पुनरावृत्तियों, पूर्ववत इतिहास और टीम टिप्पणियों को भी बेहतर संभालता है।

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

क्या मैं शीर्ष निर्देशांक के लिए प्रतिशत या पिक्सेल का उपयोग कर सकता हूँ?

दोनों काम करते हैं। प्रतिशत तत्व के बॉक्स के साथ स्केल करते हैं, इसलिए प्रतिशत में परिभाषित एक पॉलीगॉन तत्व के आकार बदलने पर अपना अनुपात आकार बनाए रखता है। पिक्सेल पूर्ण हैं, इसलिए पिक्सेल निर्देशांक वाला एक पॉलीगॉन तत्व की परवाह किए बिना समान आकार बनाए रखता है। उन आकारों के लिए प्रतिशत का उपयोग करें जिन्हें लेआउट के साथ आकार बदलना चाहिए (अधिकांश मामले) और उन आकारों के लिए पिक्सेल जिन्हें सटीक पिक्सेल स्थितियों की आवश्यकता होती है (जैसे, एक विशिष्ट डिज़ाइन तत्व के साथ संरेखण)। आप मिक्स भी कर सकते हैं: polygon(50% 10px, 100% 50%, ...) मान्य है।

क्या clip-path SEO या स्क्रीन रीडर को प्रभावित करेगा?

नहीं। clip-path केवल दृश्य गुण है। अंतर्निहित HTML पूरी तरह से सुलभ है: एक क्लिप किए गए तत्व के अंदर का पाठ अभी भी खोज इंजन द्वारा अनुक्रमित होता है, अभी भी स्क्रीन रीडर द्वारा घोषित होता है, अभी भी कीबोर्ड नेविगेशन द्वारा चयन योग्य होता है। दृश्य स्टाइलिंग के लिए clip-path का उपयोग करें; इसे सामग्री को शब्दार्थ रूप से छिपाने के तरीके के रूप में उपयोग न करें (इसके लिए display: none या aria-hidden गुण की आवश्यकता होती है)। दृष्टिगत रूप से क्लिप की गई सामग्री पहुँच पेड़ में मौजूद रहती है।

मैं clip-path को कैसे प्रतिक्रियाशील बनाऊँ?

पिक्सेल के बजाय प्रतिशत का उपयोग करें, और विभिन्न ब्रेकपॉइंट पर परिणाम की जाँच करें। मोबाइल बनाम डेस्कटॉप पर अलग-अलग अनुपात की आवश्यकता वाले आकारों के लिए, clip-path मान को स्वैप करने के लिए CSS मीडिया क्वेरीज़ का उपयोग करें: मोबाइल आकार के लिए @media (max-width: 768px) के अंदर एक अलग clip-path घोषित करें। जटिल प्रतिक्रियाशील आवश्यकताओं के लिए (जैसे, एक पॉलीगॉन जो मोबाइल पर एक वृत्त बन जाता है), विंडो आकार के आधार पर clip-path की पुनर्गणना करने के लिए JavaScript का उपयोग करने पर विचार करें, हालाँकि शुद्ध-CSS दृष्टिकोण अधिकांश मामलों को संभालते हैं।

क्या clip-path वीडियो और iframes पर लागू किया जा सकता है?

हाँ। clip-path किसी भी HTML तत्व पर काम करता है, जिसमें <video> और <iframe> शामिल हैं। मास्क तत्व स्तर पर लागू होता है, इसलिए एक हेक्सागोन में क्लिप किया गया वीडियो उस हेक्सागोन के अंदर चलता है। वीडियो नियंत्रण (जब दिखाए जाते हैं) भी क्लिप किए जाते हैं, जो प्ले/पॉज बटन को अनजाने में छिपा सकते हैं; यदि आप क्लिप किए गए क्षेत्र के बाहर नियंत्रण दिखाई देना चाहते हैं तो वीडियो को कंटेनर तत्व में लपेटें।

पॉलीगॉन शीर्षों की अधिकतम संख्या क्या है?

CSS मानक द्वारा निर्दिष्ट कोई औपचारिक सीमा नहीं है। व्यावहारिक रूप से, ब्राउज़र रेंडरिंग त्रुटियों के बिना सैकड़ों शीर्षों वाले पॉलीगॉन को संभालते हैं, लेकिन शीर्ष गणना के साथ प्रदर्शन कम हो जाता है, विशेष रूप से एनिमेटेड clip-paths के लिए। अधिकांश सजावटी आकारों के लिए 3 से 12 शीर्षों का लक्ष्य रखें; यदि आपको अधिक जटिलता की आवश्यकता है, क्लीनर लेखन और समान प्रदर्शन विशेषताओं के लिए SVG path() पर स्विच करें। 50 शीर्षों से अधिक, clip-path हाथ से बनाए रखना कठिन हो जाता है और SVG-संपादक कार्यप्रवाह अधिक समझ में आता है।

क्या मैं केवल छवियों और बक्सों के बजाय पाठ को क्लिप कर सकता हूँ?

हाँ। clip-path पाठ तत्वों पर भी काम करता है, उन्हें किसी भी अन्य तत्व की तरह मास्क करता है। दृश्य प्रभाव «एक आकार के माध्यम से झाँकता पाठ» है। अधिक परिष्कृत पाठ-आकार प्रभावों के लिए (जैसे, एक छवि के लिए क्लिपिंग मास्क के रूप में एक पाठ रूपरेखा का उपयोग), clip-path को background-clip: text के साथ संयोजित करें, जो तत्व की पृष्ठभूमि के लिए क्लिप क्षेत्र के रूप में स्वयं पाठ आकार का उपयोग करता है। सामान्य पैटर्न: केवल पाठ आकारों के अंदर दिखाई देने वाली ग्रेडिएंट पृष्ठभूमि वाला बड़ा पाठ।