clip-path जनरेटर

यह कैसे काम करता है

clip-path किसी एलिमेंट को एक रूपरेखा तक काट देता है। आकार के बाहर की कोई भी चीज़ न बनती है और न क्लिक होती है, जो इसे आकार की तस्वीर नहीं बल्कि असली आकार बनाता है — और यह किसी भी एलिमेंट पर काम करता है, इमेज और वीडियो समेत।

पिक्सेल नहीं, प्रतिशत

बहुभुज के बिंदु एलिमेंट की अपनी चौड़ाई और ऊँचाई के प्रतिशत के रूप में दिए जाते हैं, इसलिए आकार एलिमेंट के साथ खिंचता है, किसी दूसरे साइज़ पर टूटता नहीं। इसी से यह रेस्पॉन्सिव लेआउट में इस्तेमाल लायक बनता है।

क्लिक आकार का अनुसरण करते हैं

यही वह हिस्सा है जो clip-path को सजावटी ओवरले से अलग करता है। कटा हुआ क्षेत्र पॉइंटर इवेंट पाता ही नहीं, इसलिए त्रिभुज वाला बटन माउस के लिए भी उतना ही त्रिभुज है जितना आँख के लिए।

आकारों के बीच एनिमेट करना

एक बहुभुज दूसरे बहुभुज में सहजता से तभी बदल सकता है जब दोनों में बिंदुओं की संख्या समान हो। आम तरकीब यह है कि सरल आकार में डुप्लिकेट बिंदु जोड़ दिए जाएँ ताकि गिनती मिल जाए — चार बिंदुओं के रूप में लिखा त्रिभुज, जिसमें दो एक ही जगह हों, वर्ग में बदल सकता है।

-webkit- वाली पंक्ति

मौजूदा ब्राउज़रों को सिर्फ़ बिना उपसर्ग वाली प्रॉपर्टी चाहिए। उपसर्ग वाली कॉपी इसलिए शामिल है कि कुछ पुराने Safari संस्करणों को अब भी इसकी ज़रूरत है और इसे रहने देने में कुछ खर्च नहीं।

यह क्या नहीं करता

यह काटता है; दोबारा फ़्लो नहीं करता। आसपास का टेक्स्ट अब भी एलिमेंट को उसका मूल आयत मानता है। टेक्स्ट को आकार के चारों ओर लपेटने के लिए आपको shape-outside चाहिए, जिसका सिंटैक्स वही है।