html - How to make a circular clipping mask on an image which will work with IE9? -


the code i'm using right this: (note formatted in css less.) doesn't seem work ie9 or older , after looking can't find right formatting it.

.mixin-clip-path-circle(@1,@2,@3) {   -webkit-clip-path: circle(@1, @2, @3);    -moz-clip-path: circle(@1, @2, @3);   clip-path: circle(@1, @2, @3); }  .user-portrait {   position: relative;   display:inline-block;   .clipped-portrait {     .mixin-clip-path-circle(3.4rem, 3.4rem, 3.4rem);     min-height: 6.8rem;     position: absolute;     display:block;   }  <div class="user-portrait">      <img src="img/styleguide/portrait-picture-example.png" class="clipped-portrait" /> </div> 

edit: clear, i'm looking way make work in ie9, doesn't have clip-path property.

mdn (https://developer.mozilla.org/en-us/docs/web/svg/element/clippath) seems indicate clip-path supported in ie9+.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -