CSS Clip-path जनरेटर
CSS Clip-path Generator आम shapes — triangle, arrow, pentagon, hexagon, star, chevron, circle, ellipse और rounded inset — के लिए clip-path values बनाता है, लाइव प्रीव्यू के साथ।
इस टूल के बारे में
CSS Clip-path Generator आम shapes — triangle, arrow, pentagon, hexagon, star, chevron, circle, ellipse और rounded inset — के लिए clip-path values बनाता है, लाइव प्रीव्यू के साथ।
इस्तेमाल कैसे करें
- सूची से कोई shape चुनें।
- प्रीव्यू के लिए fill रंग चुनें।
- Copy CSS पर क्लिक करें और clip-path को किसी भी element या इमेज पर लगाएं।
जानने योग्य बातें
- clip-path shape के बाहर का सब कुछ छिपा देता है, इसलिए किसी image mask या SVG फ़ाइल की ज़रूरत नहीं होती।
- polygon() प्रतिशत में x y points की सूची लेता है, जो element के साथ scale होती है।
- circle(50% at 50% 50%) element को बीच में एक circle के आकार में काटता है।
- round के साथ inset() आयताकार clip में गोल कोने जोड़ता है।
- clip-path के basic shapes सभी मौजूदा प्रमुख ब्राउज़रों में सपोर्टेड हैं।
पूरी तरह आपके ब्राउज़र में चलता है — आप जो भी डालते हैं, वह न अपलोड होता है न सेव।
अक्सर पूछे जाने वाले सवाल
CSS से इमेज को किसी shape में कैसे काटें?
इमेज पर clip-path लगाएं, जैसे triangle के लिए clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path और mask में क्या फ़र्क है?
clip-path तीखे किनारों वाला vector shape काटता है। mask किसी इमेज या gradient का इस्तेमाल करता है और नरम, आंशिक रूप से पारदर्शी किनारे बना सकता है।
क्या clip-path को animate किया जा सकता है?
हाँ, अगर दोनों shapes एक ही function और बराबर संख्या के points इस्तेमाल करें, तो ब्राउज़र उनके बीच transition कर सकता है।
क्या clip-path क्लिक पर असर डालता है?
हाँ। कटे हुए shape के बाहर के हिस्से रेंडर नहीं होते और pointer events नहीं पाते।