css - How to create a "clip-path" circle on IE and Firefox? -

css - How to create a "clip-path" circle on IE and Firefox? -

i have snippet cicrle-masking. works on chrome.

but how run on firefox , ie ? please no radius-borde solution...

class="snippet-code-css lang-css prettyprint-override">.circle { -webkit-clip-path: circle(100px @ 100px 100px); clip-path: circle(100px @ 100px 100px) } class="snippet-code-html lang-html prettyprint-override"><img src="http://cp91279.biography.com/leonardo-da-vinci_a-divine-mind_hd_768x432-16x9.jpg" width="1024" height="768" alt="" class="circle"/>

.circle { -webkit-clip-path: circle(50% @ 50% 10%); clip-path: circle(50% @ 50% 10%); }

well ie doesn't back upwards css clip-path @ , firefox supports url method solution pretty much dead end - http://caniuse.com/#feat=css-clip-path

however utilize inline svg clip image has great browser back upwards - http://caniuse.com/#search=inline%20svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 200 200" xml:space="preserve" width="200px"> <defs> <!--defines shape utilize clipping--> <circle id="circle" cx="100" cy="100" r="100" /> </defs> <clippath id="clip"> <!--creates clipping mask shape--> <use xlink:href="#circle" overflow="visible"></use> </clippath> <!--group containing image clipping applied--> <g clip-path="url(#clip)"> <image overflow="visible" width="768" height="432" xlink:href="http://cp91279.biography.com/leonardo-da-vinci_a-divine-mind_hd_768x432-16x9.jpg"></image> </g> </svg>

working illustration - http://codepen.io/taneleero/pen/bnzjdj

css css3 internet-explorer firefox