सीएसएस में क्लिप-पथ इन्सेट क्रोम

Question

में काम नहीं कर रहा है मैं सीएसएस संपत्ति clip-path का उपयोग करने की कोशिश कर रहा हूं, लेकिन मुझे क्रोम में Invalid property value त्रुटि मिलती है। , यह clip-path does not work with chrome पर इस सवाल से अलग है क्योंकि यह विशिष्ट है:

.clip-me { 
 
    clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */ 
 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

नोट:

यहां एक छोटा डेमो है एसवीजी (सीएसएस नहीं)

का उपयोग कर क्लिप पथ को कैसे लागू करें, इसके बारे में पूछने के लिए सहयोग करें, यह should work in chrome का उपयोग कर सकते हैं।

Answer 1

बाहर कर देता है मैं सिर्फ -webkit- उपसर्ग की जरूरत है (हालांकि मैं vendor prefixes की इस सूची में नहीं देखते हैं) के रूप में

.clip-me {   /* top, right, bottom, left */ 
 
    -webkit-clip-path: inset(0px 50px 50px 0px); 
 
      clip-path: inset(0px 50px 50px 0px); 
 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Chrome अपडेट 55, क्लिप विक्रेता उपसर्ग के बिना -पाथ अब समर्थित है, लेकिन कई अन्य ब्राउज़रों को अभी भी -webkit-clip-path का उपयोग करने की आवश्यकता है, इसलिए इसे अभी शामिल करना सुरक्षित है।

यहाँ CanIUse का एक स्नैपशॉट है (2017) के रूप में, आंशिक समर्थन ब्राउज़रों के ऊपरी दाएं कोने में अतिरिक्त जानकारी के अक्सर -webkit- उपसर्ग

आगे पढ़ने के लिए आवश्यकता का संकेत के साथ:

• Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
• Using clip-path