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
Post a Comment