सीएसएस क्लिप पथ जनरेटर
CSS के साथ जटिल आकृतियाँ बनाने का आसान तरीका ढूंढ रहे हैं? हमारा मुफ़्त CSS Clip Path Generator आपको पॉलीगॉन, सर्कल, एलिप्स और path() फ़ंक्शन के लिए क्लिप-पथ कोड को दृश्य रूप से डिज़ाइन और निर्यात करने देता है। चाहे आपको एक विकर्ण कट, तारे का आकार, स्पीच बबल, या कोई भी कस्टम पॉलीगॉन चाहिए, आप लाइव कैनवास पर हैंडल को खींच सकते हैं, निर्देशांक समायोजित कर सकते हैं, और तुरंत प्रोडक्शन-रेडी CSS कॉपी कर सकते हैं। सिंटैक्स याद करने या हाथ से अंक गणना करने की ज़रूरत नहीं — हमारा टूल गणित संभाल लेता है ताकि आप डिज़ाइन पर ध्यान केंद्रित कर सकें। लैंडिंग पेज, हीरो सेक्शन, इमेज मास्क और क्रिएटिव लेआउट के लिए एकदम सही। अभी इसे आज़माएँ और अपनी आकृतियों को रियल टाइम में जीवंत होते देखें!
क्या है
CSS clip-path प्रॉपर्टी आपको किसी भी HTML एलिमेंट पर एक दृश्य क्षेत्र परिभाषित करने देती है — क्षेत्र के बाहर की हर चीज़ क्लिप हो जाती है। यह आधुनिक CSS में गैर-आयताकार लेआउट बनाने के लिए सबसे शक्तिशाली टूल में से एक है। overflow: hidden के विपरीत, जो केवल बॉक्स तक क्लिप करता है, clip-path जटिल ज्यामिति का समर्थन करता है, जिसमें मनमानी शीर्ष संख्या वाले बहुभुज, समायोज्य त्रिज्या वाले वृत्त, किसी भी कोण पर दीर्घवृत्त, और path() फ़ंक्शन के माध्यम से SVG-आधारित पथ शामिल हैं। सामान्य clip-path मान: • polygon() — x,y बिंदुओं की सूची के साथ एक बंद आकार परिभाषित करें। उदाहरण: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) एक हीरा बनाता है। • circle() — त्रिज्या और वैकल्पिक स्थिति के साथ एक वृत्त खींचता है। उदाहरण: circle(40% at 50% 50%)। • ellipse() — दो त्रिज्याओं के साथ एक दीर्घवृत्त खींचता है। उदाहरण: ellipse(60% 30% at 50% 50%)। • inset() — वैकल्पिक border-radius के साथ एक आयताकार क्षेत्र क्लिप करता है। उदाहरण: inset(10% round 8px)। • path() — अधिकतम लचीलेपन के लिए SVG पथ स्ट्रिंग का उपयोग करता है। ब्राउज़र समर्थन उत्कृष्ट है — सभी आधुनिक ब्राउज़र (Chrome 55+, Firefox 54+, Safari 9+, Edge 79+) -webkit- उपसर्ग की आवश्यकता के बिना मानक सिंटैक्स का समर्थन करते हैं। clip-path प्रॉपर्टी इमेज, div, हेडिंग, SVG एलिमेंट और अधिक पर काम करती है। CSS एनिमेशन के साथ मिलाकर, आप आकृतियों के बीच स्मूथ मॉर्फिंग इफेक्ट बना सकते हैं। हमारा जनरेटर clip-path सिंटैक्स लिखने की कठिनाई को दूर करता है। प्रतिशत का अनुमान लगाने के बजाय, आप एक विज़ुअल कैनवास पर कंट्रोल पॉइंट खींचते हैं और टूल साफ, उपसर्ग सहित CSS आउटपुट करता है। आप मौजूदा clip-path मानों को संपादित करने के लिए आयात भी कर सकते हैं, समन्वय इकाइयों (प्रतिशत या पिक्सेल) के बीच स्विच कर सकते हैं, और परिणाम को कॉपी करने के लिए तैयार कोड ब्लॉक के रूप में निर्यात कर सकते हैं।
कैसे उपयोग करें
- अपने ब्राउज़र में CSS Clip Path Generator खोलें। एक खाली कैनवास जिसमें एक नमूना एलिमेंट होगा, दिखाई देगा।
- टूलबार से एक आकार प्रीसेट चुनें — त्रिभुज, षट्भुज, तारा, तीर, हीरा, या शुरुआत से शुरू करने के लिए 'Custom' चुनें।
- आकार को बदलने के लिए कैनवास पर कंट्रोल पॉइंट खींचें। प्रत्येक बिंदु सटीकता के लिए ग्रिड पर स्नैप होता है। आप किनारे पर क्लिक करके नए बिंदु जोड़ सकते हैं या राइट-क्लिक करके बिंदु हटा सकते हैं।
- ग्लोबल सेटिंग्स समायोजित करें: प्रतिशत या पिक्सेल आउटपुट के बीच चुनें, fill-rule (nonzero बनाम evenodd) टॉगल करें, और यदि आप आकार को एनिमेट करने की योजना बनाते हैं तो transform-origin सेट करें।
- आउटपुट पैनल से जनरेटेड CSS कॉपी करें। कोड में clip-path प्रॉपर्टी और आवश्यक वेंडर प्रीफ़िक्स शामिल हैं। इसे अपनी स्टाइलशीट या इनलाइन स्टाइल एट्रीब्यूट में पेस्ट करें।
- अंतर्निहित संगतता जाँचक का उपयोग करके ब्राउज़रों में परीक्षण करें, फिर एनिमेटेड clip-path मॉर्फिंग इफेक्ट बनाने के लिए CSS ट्रांज़िशन लागू करें।
उदाहरण
इनपुट: Polygon: 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%
प्रक्रिया: निर्देशांक तल पर 5 बिंदु मैप करें → क्रमिक रूप से कनेक्ट करें → पंचकोण आकार बनाएं
परिणाम: clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
इनपुट: वृत्त: circle(50% at 50% 50%)
प्रक्रिया: त्रिज्या 50% परिभाषित करें → केंद्र 50%,50% पर → दीर्घवृत्त पथ उत्पन्न करें
परिणाम: clip-path: circle(50% at 50% 50%)
इनपुट: इनसेट: inset(10% 20% 30% 40% round 12px)
प्रक्रिया: 4 ऑफसेट की गणना करें → border-radius लागू करें → सामग्री क्षेत्र को क्लिप करें
परिणाम: clip-path: inset(10% 20% 30% 40% round 12px)
संबंधित खोजें
लोग यह भी खोजते हैं: सीएसएस, क्लिप-पथ, आकार, बहुभुज, पथ।
सीएसएसक्लिप-पथआकारबहुभुजपथ
अक्सर पूछे जाने वाले प्रश्न
clip-path और overflow: hidden में क्या अंतर है?
overflow: सरलता से सामग्री को एलिमेंट के आयताकार बाउंडिंग बॉक्स में क्लिप करता है। यह तिरछे कट या जटिल बहुभुज नहीं बना सकता। दूसरी ओर, clip-path एक कस्टम क्लिपिंग क्षेत्र परिभाषित करता है जो कोई भी आकार हो सकता है — वृत्त, तारे, तीर, या दर्जनों शीर्षों वाले मनमाने बहुभुज। यदि आपको आयताकार कट की आवश्यकता है, तो overflow काम करता है; गैर-आयताकार किसी भी चीज़ के लिए clip-path सही तरीका है।
क्या मैं CSS ट्रांज़िशन या कीफ्रेम एनिमेशन के साथ clip-path को एनिमेट कर सकता हूँ?
हाँ! आप CSS ट्रांज़िशन या @keyframes का उपयोग करके समान संख्या में बिंदुओं वाले दो आकृतियों के बीच clip-path को एनिमेट कर सकते हैं। एक सहज मॉर्फ के लिए, प्रारंभ और अंत दोनों polygon() फ़ंक्शन में समान संख्या में शीर्ष निर्देशांक होने चाहिए। उदाहरण के लिए, polygon(50% 0%, 100% 100%, 0% 100%) से polygon(50% 10%, 90% 90%, 10% 90%) पर संक्रमण सुचारू रूप से काम करता है। यदि बिंदु संख्याएँ भिन्न हैं, तो ब्राउज़र बिना किसी इंटरपोलेशन के तुरंत स्नैप करेगा।
क्या clip-path क्लिक इवेंट्स और एक्सेसिबिलिटी को प्रभावित करता है?
clip-path किसी तत्व की दृश्य दृश्यता को बदलता है लेकिन DOM में उसके बाउंडिंग बॉक्स को नहीं बदलता। क्लिक इवेंट्स, फोकस आयताकार, और स्क्रीन रीडर क्षेत्र अभी भी मूल आयताकार बॉक्स का अनुसरण करते हैं। यह भ्रम का एक सामान्य स्रोत है — एक तत्व जो हीरे जैसा दिखता है, वह पॉइंटर इवेंट्स के लिए अपने पूर्ण आयताकार क्षेत्र पर कब्जा करता है। यदि आपको सटीक हिट-टेस्टिंग की आवश्यकता है, तो इसके बजाय SVG का उपयोग clipPath के साथ करने पर विचार करें।
मैं एक रिस्पॉन्सिव clip-path कैसे बनाऊं जो विभिन्न स्क्रीन आकारों के अनुकूल हो?
polygon(), circle(), या ellipse() में निश्चित पिक्सेल के बजाय प्रतिशत-आधारित निर्देशांक का उपयोग करें। प्रतिशत तत्व के बाउंडिंग बॉक्स के सापेक्ष होते हैं, इसलिए तत्व के आकार बदलने पर आपकी आकृति आनुपातिक रूप से स्केल होती है। हमारे टूल द्वारा उत्पन्न सभी आकृतियाँ डिफ़ॉल्ट रूप से प्रतिशत आउटपुट देती हैं — बस सुनिश्चित करें कि यदि रिस्पॉन्सिवness महत्वपूर्ण है तो आप पिक्सेल मोड पर स्विच न करें।
क्या मैं बैकग्राउंड इमेज और ग्रेडिएंट्स पर clip-path का उपयोग कर सकता हूं?
बिल्कुल। clip-path पूरे तत्व पर लागू होता है जिसमें इसकी पृष्ठभूमि, background-image, और background-gradient शामिल हैं। आप एक div पर ग्रेडिएंट बैकग्राउंड रख सकते हैं और फिर इसे षट्कोण आकार में क्लिप कर सकते हैं — ग्रेडिएंट केवल क्लिप किए गए क्षेत्र के भीतर ही दिखाई देगा। यह तकनीक बाहरी इमेज एडिटिंग सॉफ्टवेयर की आवश्यकता के बिना रचनात्मक हीरो सेक्शन और सजावटी इमेज फ्रेम के लिए बहुत अच्छी है।