Image masking using css/javascript - html

Question

Is it possible to transform a div into this kind of shape then fill it with an image? Or better transform an image to that shape? Both with CSS or Javascript.
Then arrange multiple of them in this manner
I intend to group the shapes into several rings as per the second picture. As for the pictures, it will be dynamic, so can't really pre-cut them.
*Edit: I found out the effect I actually want. It is actually masking. In webkit, this css property: -webkit-mask-box-image works well (I can use .png image too for the mask), but when I tried masking for firefox (using .svg file generated by Illustrator), it doesn't seem to work. The same .svg file works in Chrome using -webkit-mask-box-image css property

Answer 1

Yes, it is possible. Even without using any JavaScript or browser specific properties.
demo
I've tested it and it works on all current versions of Chrome, IE, FF, Opera, Safari (on Windows 7).
The idea is to have multiple wheels with slices of different angles (get the angle using a skew transform; the slices are also rotated using a rotate transform). The inner wheels cover the the central part of the outer ones.
The version I've made is a pretty simple one, with two wheels, 8 images for the inner wheel (that means each slice of the inner wheel has 360°/8 = 45°) and 12 images for the outer wheel (=> each slice of the outer one has 360°/12 = 30°).
Relevant HTML:
<div class='picture-wheel'>
<div class='outer-wheel wheel'>
<div class='slice'><div class='bg'></div></div>
<!-- the rest of the slices, 11 more for this demo -->
<div class='inner-wheel wheel'>
<div class='slice'><div class='bg'></div></div>
<!-- the rest of the slices, 7 more for this demo -->
<div class='cover-wheel wheel'></div>
</div>
</div>
</div>
Relevant CSS:
.wheel {
overflow: hidden;
position: relative;
border-radius: 50%;
box-shadow: 0 0 1em;
}
.picture-wheel {
width: 30em; height: 30em;
margin: 3em auto 0;
}
.slices-wrapper {
position: absolute;
width: 100%; height: 100%;
}
.slice {
overflow: hidden;
position: absolute;
bottom: 50%; right: 50%;
transform-origin: 100% 100%;
}
.outer { width: 30em; height: 30em; }
.inner-wheel {
transform: rotate(7.5deg);
width: 21em; height: 21em;
margin: 4.5em;
}
.cover-wheel {
width: 12em; height: 12em;
margin: 4.5em;
box-shadow: inset 0 0 1em;
background: white;
}
.bg {
border-radius: 50%;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: 8em 6em;
}
.outer-wheel > .slice {
width: 15em; height: 15em;
transform: skewY(60deg);
}
.outer-wheel > .slice:nth-child(2) { transform: rotate(30deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(3) { transform: rotate(60deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(4) { transform: rotate(90deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(5) { transform: rotate(120deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(6) { transform: rotate(150deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(7) { transform: rotate(180deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(8) { transform: rotate(-150deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(9) { transform: rotate(-120deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(10) { transform: rotate(-90deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(11) { transform: rotate(-60deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(12) { transform: rotate(-30deg) skewY(60deg); }
.outer-wheel > .slice .bg {
width: 30em; height: 30em;
transform: skewY(-60deg) rotate(-15deg);
}
.outer-wheel > .slice .bg {
background-image:
url(image-for-first-slice-outer.jpg);
}
.outer-wheel > .slice:nth-child(2) .bg {
background-image:
url(image-for-second-slice-outer.jpg);
}
/* background images for the other slices of the outer wheel */
.inner-wheel > .slice {
width: 10.5em; height: 10.5em;
transform: skewY(45deg);
}
.inner-wheel > .slice:nth-child(2) { transform: rotate(45deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(3) { transform: rotate(90deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(4) { transform: rotate(135deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(5) { transform: rotate(180deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(6) { transform: rotate(-135deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(7) { transform: rotate(-90deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(8) { transform: rotate(-45deg) skewY(45deg); }
.inner-wheel > .slice .bg {
width: 21em; height: 21em;
transform: skewY(-45deg) rotate(-22.25deg);
}
.inner-wheel > .slice .bg {
background-image:
url(image-for-first-slice-inner.jpg);
}
.inner-wheel > .slice:nth-child(2) .bg {
background-image:
url(image-for-second-slice-inner.jpg);
}
/* background images for the other slices of the inner wheel */
Another slightly different enhanced version:
demo

Answer 2

Could try using the Canvas element and draw
http://jsfiddle.net/m6QgV/6/
Here's an example

Answer 3

Have a look at CSS3 transformations. You should be able to use standard matrix transformations (similar to how you would in OpenGL or DirectX) to do it.