UTILS.
निजता हमेशा पहले
◇

CSS clip-path जनरेटर

किसी एलिमेंट को सामान्य आकृतियों में क्लिप करें और clip-path CSS कॉपी करें।

आपकी फ़ाइलें इसी डिवाइस पर रहती हैं

फ़ाइलें ब्राउज़र में प्रोसेस होती हैं, कभी अपलोड नहीं होतीं। साइट टूल चलाने के लिए ज़रूरी कोड और संसाधन डाउनलोड करती है। न खाता, न ट्रैकर।

इस टूल को एक HTML फ़ाइल में सहेजकर ऑफ़लाइन इस्तेमाल करने के लिए डाउनलोड करें।

गोपनीयता →

एक पूरा उदाहरण आज़माएँ

उदाहरण

षट्भुज आकार चुनने पर clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); मिलता है। हर जोड़ी एलिमेंट के अंदर की x और y स्थिति है, इसलिए आकार एलिमेंट की चौड़ाई और ऊँचाई के साथ खिंचता है।

ध्यान रखें

क्लिपिंग एलिमेंट का कुछ हिस्सा छिपाती है, पर उसका लेआउट बॉक्स बना रहता है: आसपास के एलिमेंट नहीं खिसकते और छिपे कोने क्लिक नहीं लेते। बॉर्डर और बॉक्स शैडो भी कट जाते हैं; छाया चाहिए तो बाहरी एलिमेंट पर drop-shadow फ़िल्टर लगाएँ।

इस टूल के बारे में

एक आकृति चुनें और संबंधित clip-path नियम के साथ प्रीव्यू बॉक्स को तुरंत क्लिप करें, फिर उपयोग के लिए तैयार CSS कॉपी करें। प्रीव्यू पूरी तरह आपके ब्राउज़र में लाइव अपडेट होता है।

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

पॉलीगॉन clip-path कैसे काम करते हैं?
प्रत्येक बिंदु बॉक्स के सापेक्ष एक x y प्रतिशत जोड़ी है; ब्राउज़र उन्हें क्रम में जोड़ता है और केवल आउटलाइन के अंदर का क्षेत्र दिखाता है।
क्या सभी ब्राउज़र clip-path को सपोर्ट करते हैं?
पॉलीगॉन, वृत्त, दीर्घवृत्त और inset आकृतियाँ हर आधुनिक ब्राउज़र में सपोर्टेड हैं, इसलिए जनरेट की गई CSS बिना प्रीफ़िक्स के काम करती है।

और टूल