CSS clip-path जनरेटर

पहले से तय आकार से शुरू करें या अपना कटान बनाने के लिए बहुभुज के बिंदु सीधे खिसकाएँ, और लाइव प्रीव्यू के साथ संबंधित CSS कोड clip-path पाएँ। सब कुछ आपके ब्राउज़र में होता है, कुछ भी सर्वर पर नहीं भेजा जाता।

आकार:

आकार को ठीक करने के लिए प्रीव्यू पर सफ़ेद बिंदुओं को खींचें, या नीचे बिंदु जोड़ें/हटाएँ।

CSS कोड

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

CSS प्रॉपर्टी clip-path किसी एलिमेंट को बिंदुओं की सूची से तय आकार में काटती है, जो एलिमेंट की चौड़ाई और ऊँचाई के प्रतिशत में व्यक्त होते हैं। यह टूल तैयार आम आकार (त्रिभुज, षट्भुज, रिबन, तारा...) देता है और हर बिंदु को माउस या उंगली से खिसकाने की सुविधा भी देता है, ताकि आप पूरी तरह कस्टम कटान बना सकें।

निर्देशांक प्रतिशत में क्यों व्यक्त किए जाते हैं?

पिक्सेल की जगह प्रतिशत इस्तेमाल करने से कटा हुआ आकार रेस्पॉन्सिव हो जाता है: वह जिस एलिमेंट पर लगा है उसके असली आकार के हिसाब से अपने-आप ढल जाता है, जबकि तय मान किसी दूसरी स्क्रीन पर कटान को बिगाड़ देते।

क्या clip-path सभी इमेज और वीडियो पर काम करता है?

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

100% लोकल प्रोसेसिंग: बहुभुज का खाका और बना हुआ कोड पूरी तरह आपके ब्राउज़र में रहते हैं।