Developer Tools
Design Tools
Web UtilitiesCSS क्लिप पाथ जनरेटर
ड्रैग-एंड-ड्रॉप विज़ुअल एडिटर से CSS clip-path पॉलीगॉन, सर्कल और एलिप्स बनाएं। तीर, त्रिकोण और तारे जैसे सामान्य आकारों के लिए प्रीसेट उपयोग करें। CSS तुरंत कॉपी करें।
पॉइंट 1
पॉइंट 2
पॉइंट 3
पॉइंट 4
CSS प्रॉपर्टी
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}CSS वैल्यू
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)संबंधित टूल
इस टूल के बारे में
यह कैसे काम करता है
- शेप टाइप चुनें: पॉलीगॉन, सर्कल या एलिप्स
- clip path को आकार देने के लिए प्रीव्यू कैनवास पर कंट्रोल पॉइंट ड्रैग करें
- सटीक नियंत्रण के लिए स्लाइडर और इनपुट से सेटिंग्स समायोजित करें
- अपनी स्टाइलशीट में उपयोग के लिए जनरेट की गई CSS clip-path वैल्यू कॉपी करें
- तीर, त्रिकोण और तारे जैसे सामान्य आकारों के लिए प्रीसेट उपयोग करें
- वास्तविक इमेज या सॉलिड कलर बैकग्राउंड पर लागू clip path का प्रीव्यू देखें
सामान्य उपयोग के मामले
- हीरो सेक्शन के लिए गैर-आयताकार इमेज क्रॉप बनाना
- विकर्ण या शेवरॉन सेक्शन डिवाइडर बनाना
- पॉलीगॉन-आकार वाले प्रोफाइल चित्र या बैज डिज़ाइन करना
- गैलरी के लिए ज्यामितीय इमेज मास्क बनाना
- तीर के आकार वाले कॉल-टू-एक्शन बटन बनाना
- कस्टम आकार के UI कार्ड और टूलटिप डिज़ाइन करना
अक्सर पूछे जाने वाले सवाल
CSS clip-path क्या है?
CSS clip-path प्रॉपर्टी आपको किसी एलिमेंट के लिए एक क्लिपिंग क्षेत्र परिभाषित करने देती है — केवल उस क्षेत्र के अंदर का हिस्सा दिखता है, बाहर का सब कुछ छिप जाता है। यह polygon(), circle(), ellipse() और path() जैसे आकारों को सपोर्ट करता है।
प्रीव्यू में कंट्रोल पॉइंट कैसे ड्रैग करें?
जब Polygon शेप टाइप चुना जाता है, तो प्रीव्यू कैनवास पर पॉलीगॉन के हर वर्टेक्स पर नीले गोल हैंडल दिखते हैं। किसी भी हैंडल को क्लिक करके ड्रैग करें। ड्रैग करते समय CSS आउटपुट तुरंत अपडेट होता है।
X और Y प्रतिशत का क्या मतलब है?
clip-path पॉलीगॉन निर्देशांक एलिमेंट की चौड़ाई और ऊंचाई के प्रतिशत के रूप में व्यक्त किए जाते हैं। 0% 0% ऊपर-बाएं कोना है, 100% 0% ऊपर-दाएं, 100% 100% नीचे-दाएं, और 0% 100% नीचे-बाएं।
पॉलीगॉन पॉइंट कैसे जोड़ें या हटाएं?
"+ पॉइंट जोड़ें" बटन का उपयोग करके केंद्र (50% 50%) पर नया कंट्रोल पॉइंट जोड़ें, फिर इसे ड्रैग करें या X/Y मान संपादित करें। पॉइंट हटाने के लिए "− हटाएं" पर क्लिक करें। पॉलीगॉन में कम से कम 3 पॉइंट होने चाहिए।
कौन से प्रीसेट आकार उपलब्ध हैं?
टूल में 12 पॉलीगॉन प्रीसेट हैं: त्रिकोण, डायमंड, दाएं तीर, बाएं तीर, पंचभुज, षट्भुज, तारा, शेवरॉन, बाएं ढलान, दाएं ढलान, बेवेल और रैबेट।
सर्कल clip-path कैसे काम करता है?
Circle शेप टाइप चुनने पर clip-path: circle(r% at cx% cy%) वैल्यू जनरेट होती है। रेडियस स्लाइडर सर्कल का आकार नियंत्रित करता है और सेंटर X/Y स्लाइडर केंद्र बिंदु हिलाते हैं।
सर्कल और एलिप्स में क्या अंतर है?
सर्कल clip-path एक रेडियस लेता है, पूरी तरह गोल क्लिपिंग आकार बनाता है। एलिप्स clip-path अलग X रेडियस (rx) और Y रेडियस (ry) लेता है, जिससे अंडाकार आकार बनाए जा सकते हैं।
जनरेट किया गया CSS कैसे कॉपी करें?
CSS आउटपुट सेक्शन में दो कॉपी बटन हैं। "CSS कॉपी करें" .element सेलेक्टर सहित पूरा CSS रूल कॉपी करता है। "वैल्यू कॉपी करें" केवल clip-path वैल्यू कॉपी करता है।
क्या clip-path सभी ब्राउज़र में सपोर्टेड है?
CSS clip-path मूल आकारों (polygon, circle, ellipse) के साथ Chrome, Firefox, Safari और Edge सहित सभी आधुनिक ब्राउज़र में अच्छी तरह सपोर्टेड है और मूल आकारों के लिए वेंडर प्रीफ़िक्स की ज़रूरत नहीं।
क्या clip-path आकारों को एनिमेट किया जा सकता है?
हाँ! CSS clip-path को समान प्रकार और समान पॉइंट संख्या वाले आकारों के बीच सुचारू रूप से ट्रांज़िशन और एनिमेट किया जा सकता है। उदाहरण: "transition: clip-path 0.4s ease"।
सेक्शन डिवाइडर के लिए clip-path का उपयोग कैसे करें?
पूर्ण-चौड़ाई सेक्शन एलिमेंट पर पॉलीगॉन clip-path लागू करके पेज सेक्शन के बीच विकर्ण या शेवरॉन ट्रांज़िशन बनाएं। शुरुआती बिंदु के रूप में बाएं या दाएं ढलान प्रीसेट का उपयोग करें।
प्रीव्यू बैकग्राउंड इमेज ऑप्शन क्या है?
प्रीव्यू बैकग्राउंड को "इमेज" पर स्विच करने पर, प्रीव्यू सॉलिड रंग की बजाय ग्रेडिएंट (इंडिगो से पिंक) से भर जाता है। यह आपको दिखाता है कि फोटो या समृद्ध बैकग्राउंड पर clip-path कैसा दिखेगा।