<div id="mask-sample"></div>
<p id="copyright">photo by <a href="https://www.flickr.com/photos/jar0d/" target="_blank">Sander van der Wel</a></p>@import "compass/css3";
#mask-sample{
width: 300px;
height: 300px;
margin: 30px auto 0;
}
#copyright{
position: fixed;
z-index: 10000;
bottom: 30px;
right: 10px;
font-size: 11px;
color: #333;
font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
a{
color: #333;
&:hover{
color: #8ad5d8;
text-decoration: underline;
}
}
}// sample2
var mask_sample = Raphael('mask-sample', '100%', '100%');
var img2 = mask_sample.image('https://techapi.manulneko.com/files/2014/04/4519098234_f43f010be1_z.jpg', 0, 0, 300, 300);
var mask = document.createElementNS('https://www.w3.org/2000/svg', 'clipPath');
mask.setAttribute('id', 'mask');
var path = document.createElementNS('https://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M150,10C220,10,290,80,290,150,290,220,220,290,150,290,80,290,10,220,10,150,10,80,80,10,150,10Z');
mask.appendChild(path);
mask_sample.defs.appendChild(mask);
img2.node.setAttribute('clip-path', 'url(#mask)');
External CSS
This Pen doesn't use any external CSS resources.