क्लिप-पाथ जनरेटर: polygon(), inset(), circle() और ellipse()

इसका इस्तेमाल कैसे करें

क्लास का नाम के लिए एक नाम लिखें, जैसे triangle, और आकार चुनें।
polygon के लिए पूर्वावलोकन पर किसी बिंदु को खींचें, या खानों में उसका x और y लिखें। बिंदुओं की संख्या बदलने के लिए बिंदु जोड़ें और आखिरी बिंदु हटाएँ इस्तेमाल करें।
inset, circle या ellipse के लिए खानों में संख्याएँ लिखें। पूर्वावलोकन तुरंत फिर से बनता है।
CSS नियम अपनी स्टाइल शीट में कॉपी करें, और क्लास उस तत्व पर लगाएँ जिसे आप काटना चाहते हैं।

चार आकार

CSS Shapes Module वे बुनियादी आकार तय करता है जो clip-path लेता है। polygon बिंदुओं की सूची है, जिसके हर बिंदु में एक x और एक y होता है, और बिंदु उसी क्रम में जुड़ते हैं जिस क्रम में आप उन्हें लिखते हैं। inset बॉक्स को चार दूरियों पर काटता है, जो ऊपर, दाएँ, नीचे और बाएँ के क्रम में दी जाती हैं। circle या ellipse की एक या दो त्रिज्याएँ होती हैं, और केंद्र शब्द at के बाद लिखा जाता है।

polygon(50% 0%, 100% 100%, 0% 100%) में तीन बिंदु हैं; हर बिंदु का x और y प्रतिशत में है।
inset(10% 20% 10% 20%) ऊपर और नीचे से 10%, और दाएँ और बाएँ से 20% काटता है।
circle(60px at 50% 50%) की त्रिज्या 60 px है और उसका केंद्र बॉक्स के बीच में है।

प्रतिशत और संदर्भ बॉक्स

किसी बिंदु, इनसेट या केंद्र में प्रतिशत बॉक्स का एक हिस्सा है, और विनिर्देश उसे संदर्भ बॉक्स के इस्तेमाल किए गए आकार पर हल करता है। CSS Masking Module कहता है कि जब कोई संदर्भ बॉक्स नहीं दिया जाता, तो बॉर्डर बॉक्स इस्तेमाल होता है। आकार के बाहर पड़ने वाला तत्व का हिस्सा नहीं बनाया जाता।

टूल क्या नहीं लिखता

polygon के लिए फ़िल नियम (fill rule), inset का round भाग, और clip-path के url() या path() रूप।
वृत्त या दीर्घवृत्त के लिए प्रतिशत त्रिज्या। इस टूल के पढ़े गए CSS Shapes पाठ में यह नहीं लिखा कि उसे कैसे हल किया जाता है, इसलिए त्रिज्याएँ px में हैं।

हल किया हुआ उदाहरण: एक त्रिभुज

त्रिभुज तीन बिंदुओं वाला एक बहुभुज है: बॉक्स का ऊपर का बीच, नीचे का दायाँ और नीचे का बायाँ कोना। तालिका हर बिंदु देती है, और टूल .triangle क्लास के लिए clip-path को polygon(50% 0%, 100% 100%, 0% 100%) पर लिखता है।

बिंदु	x	y
1	50%	0%
2	100%	100%
3	0%	100%

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

वृत्त और दीर्घवृत्त की त्रिज्याएँ px में क्यों हैं?

CSS Shapes का पाठ यह नहीं बताता कि circle() और ellipse() के लिए प्रतिशत त्रिज्या कैसे हल होती है, इसलिए टूल केवल px देता है। px की त्रिज्या का एक ही अर्थ होता है, और पूर्वावलोकन उसे आपकी स्क्रीन पर बॉक्स के आकार के हिसाब से बनाता है।

गलत मान लिखने पर आकार क्यों गायब हो जाता है?

टूल कारण लाल रंग में दिखाता है और कोई आकार नहीं बनाता, ताकि गलत नियम कभी सामने न आए। सीमा से बाहर का मान, या ऐसा इनसेट जो बॉक्स का कोई हिस्सा न छोड़े, इसके सबसे आम कारण हैं।

क्या बिंदुओं का क्रम मायने रखता है?

हाँ। बिंदु उसी क्रम में लिखे जाते हैं जिसमें आप उन्हें सूचीबद्ध करते हैं, और वही क्रम बाहरी रेखा बनाता है। एक बिंदु खिसकाने से आकार बदलता है, बाकी बिंदु नहीं बदलते।

clip-path और border-radius में क्या फर्क है?

clip-path तत्व को एक आकार पर काटता है, इसलिए उसके बाहर का हिस्सा नहीं दिखता; border-radius केवल कोने गोल करता है। clip-path का संदर्भ बॉक्स बॉर्डर बॉक्स होता है, जब तक कोई दूसरा बॉक्स न दिया जाए।

यहाँ एक बहुभुज में कितने बिंदु हो सकते हैं?

3 से 20 तक। अधिक बिंदु बारीक रेखा देते हैं, पर नियम लंबा होता है, और पूर्वावलोकन 20 हैंडल तक ही काम करता है।

क्या मेरा बनाया CSS कहीं भेजा जाता है?

नहीं। पूर्वावलोकन और नियम आपके ब्राउज़र में बनते हैं। कुछ भी सहेजा नहीं जाता और हमारे सर्वर को नहीं भेजा जाता, इसलिए पेज छोड़ने से पहले CSS कॉपी कर लें।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार गुरुवार, 12 नवंबर 2026 को जाँचे गए।